Attempting to utilize flexbox in a Bootstrap 4 navbar has brought up an unusual Javascript issue. While most of the functionality seems to be working fine, there is a strange behavior that occurs when toggling the navbar open and then closed. The Bootstrap javascript ends up adding a style of "height: 0px;" to the navbar-toggleable-{} class, causing misalignment due to the use of "align-items: center" in the parent element. Manually removing this added style resolves the problem temporarily.
The image below illustrates the issue:
https://i.sstatic.net/QiQAA.png
This issue only occurs in certain scenarios— for example, resizing the window with the element already open shows no problems. Additionally, not opening the collapsed navbar prevents any issues from arising.
So, the question remains: how can a properly functioning Bootstrap 4 navbar incorporating flexbox be implemented? One possible solution could involve preventing Bootstrap from adding unnecessary styles to elements. If an element is hidden (via "display: none"), setting its height to zero should not be necessary.
Edit: Further investigation led me to discover that including removeAttr('style') at the appropriate location in the Bootstrap javascript seemed to resolve the issue. However, it is uncertain whether this is the correct method for addressing the problem.