IE11 does not keep minimum content size of flex item

[Sheile]

like 1.1.b, IE11 does not keep minimum content size of flex item if it has multiple lines of text which is created by text wrapping.

Bug

Codepen: https://codepen.io/sheile/pen/yozWOz

Left example hasn't problem. All brower keep minimum size of flex item if it is broken text by <br>tag.. Right example has problem in IE11. Overlap text because shrink item smaller than content size.

Workaround

Codepen: https://codepen.io/sheile/pen/dzVEXL

Workaround is same as 1.1.b. Specify flex-shrink: 0 on item to keep size of flex item.

Checked browsers

• Chrome 60.0.3112.90
• Firefox 54.0.1
• IE 11.1593.14393.0

[philipwalton]

Oh, interesting, thanks! I never noticed that <br> tags made a difference in my Flexbug 1 example. I'll update that demo and add IE 11 to the list.

[philipwalton]

Actually, I think I may have spoken too soon.

I don't think this is an occurrence of flexbug 1 because I don't think it's ignoring the content when shrinking. Instead, I think it's mis-calculating the height of the content -- it appears to do the calculation as if the text weren't wrapping, so it calculates a single-line height (which is different from 0, which you'd expect if it were flexbug 1).

[Sheile]

your opinion match current behavior. Three flexitem has been calculated with single line of text and these boxmodel are same(240 x 18.4 in my environment). I want to ask about workaround, Do you have any idea about why flex-shrink: 0 will calculate height correctly?

[mlisowsk]

I ran into this bug today when working with MS WebBrowser Control (which is based on IE11, if IE11 is installed on that machine).

Workaround

My workaround is to set the CSS height property explicitly like so: function _IEfixHeight(i, el) { el.style.height = el.offsetHeight+"px"; } and to let it free again: function _IEautoHeight(i, el) { el.style.height = "auto"; }

The "fix" function can then be called on elements which are affected by the bug: $(".affected-class").each( _IEfixHeight ); In cases where elements are manipulated and height should adapt to that I call _IEautoHeight() first, to let the browser figure out the new height followed by _IEfixHeight(), like so:

    the_jQel.do_something_to_element_that_affects_height();
    // fix IE bug:
    _IEautoHeight(0, the_jQel.get(0) ); // let browser auto-adjust height
    _IEfixHeight(0, the_jQel.get(0) );  // fix adjusted height