In IE11 the following example does not work correctly if you shrink the window width:
http://codepen.io/anon/pen/mEjYYY
In Chrome, Firefox and Edge the behaviour is correct.
Another example:
http://codepen.io/anon/pen/AXgGkY
Correct:
IE11:
A min-width of 1 px seems to solve the problem. Very odd...
http://codepen.io/anon/pen/RRBXwG
http://codepen.io/anon/pen/BzPXBd
In your case you're using the default flex shrink and basis values. If you set them (along with optionally a min-width
) everything seems to handle fine:
http://codepen.io/anon/pen/NALrrz
I know this is probably a reduced test case from a larger issue, so I think I'd need more context as to how this came up and what specifically the problem is.
Your example is not what I want... Please see the second example in my first post.
Correct:
IE11:
My point was that flex items with text in them will behave differently from flex items with fixed-width things in them (like in your most recent screenshot). I was also making sure you were aware that you weren't setting the flex shrink/basis properties.
While I agree that there's conflicting behavior going on here, it's not clear how to generalize these differences into a clear "bug" with a clear workaround. Without that, I can't add it to the list of flexbugs.
My example with the colored boxes has only containers with a fixed size (200px width and 20px height). And the workaround is "min-width: 1px;".
If someone has this exact problem, then sure min-width: 1px
could be a workaround. But recommending min-width: 1px
for any nested flex box layout is obviously too broad a recommendation.
I can't add this to the flexbugs list unless we can identify a generic set of situations in which this bug occurs and where the min-width: 1px
fix always works.
2.5 years later and min-width: 1px
or flex: 1 1 0%
still works.
Most helpful comment
2.5 years later and
min-width: 1px
orflex: 1 1 0%
still works.