Menu
I am developing a site which displays OK in the latest versions of Firefox/SeaMonkey/Chrome, but interestingly in IE11 there is a rendering problem:
http://devel.gooeysoftware.com/mozaddons/switching.php
If you load this in IE11, the "Switching from Firefox to SeaMonkey" menu item along the left does not get its text wrapped to the size of the containing DIV, but instead overflows. I can't see why this is. Is it just a bug in IE11 or am I missing some CSS to get it to wrap?
Looks like they fixed a bunch of the IE11 flexbox rendering bugs in Edge.
IE11:
Edge:
601
Note also that Internet Explorer 11 supports the modern display: flex specification however it has a number of bugs in the implementation.
As you only want the text itself to wrap you need to use flex-wrap: nowrap; to keep . right on the same line. The text will automatically wrap when there is not enough space.
Windows Internet Explorer 8. The -ms-word-wrap attribute is an extension to CSS, and can be used as a synonym for word-wrap in IE8 Standards mode. Use this property to enable the browser to break up otherwise unbreakable strings. This differs from the white-space property, which turns wrapping of the text on and off.
When text wrapping is enabled for a control, text will automatically wrap inside that control when users type into it. If text wrapping is disabled, any text that exceeds the width of the control will be hidden.
Found this easy fix in the Flexbox bugs repository:
/** * Flexbug demo 2.1.b (workaround) * * 1. Set `max-width:100%` to prevent * overflow. * 2. Set `box-sizing:border-box` if * needed to account for padding * and border size. */ .FlexItem { box-sizing: border-box; /* 2 */ max-width: 100%; /* 1 */ } Flexbox bug repository
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
