I have a header bar, which is a flex row container. It consists of three icons, then a blank label acting as a spacer, then more icons, then finally an embedded view which contains a “user” icon and the currently logged in username.
The intention is that the three icons on the left of the spacer are positioned on the left hand end of the header, and the remaining controls are positioned on the right hand end. Everything except the spacer has a fixed size (fixed basis, grow and shrink set to zero), while the spacer takes up whatever space is available (auto basis, grow and shrink set to 1), which achieves my “these icons on the left, these icons on the right” outcome.
However, I have decided that since not everyone’s name is the same length, the size of the embedded view showing the current user should also be dynamic, and set to take up as much space as it needs to display the entire username. So, I set the basis of that embedded view to auto, leaving grow and shrink set to zero. In the designer, this does exactly what I want. All the icons on the right shift left or right in order to display the desired username in its entirety, no matter how long, because the spacer is growing and shrinking to fill the available space.
But at runtime (Firefox), the username view takes up seemingly infinite width, pushing everything to the far left, reducing the size of the spacer to zero, and giving me a scroll bar to scroll a long way to the right, showing only blank space.
Is this a bug with firefox/perspective, or have I messed something up in my configuration?
Edit: I should search more carefully before posting: [BUG] Perspective flex “auto” not behaving as expected with icon and svg
tl;dr, it’s a browser bug, and the icon is the cause of the problem. In a flex container with auto width, an SVG does some strange things, and you can fix it by adding a “width” property to the style of the icon, and specifying the width.