Being a web developer, I’ve had my fair share of problematic IE behavior. Microsoft’s browsers up to, and including, IE11 are not very good in terms of standards compliance. This is pretty well known with web developers.
Well, after my post yesterday regarding CSS flexbox, I found that IE10/11 exhibit some odd discrepancies.
The one major problem I found was that in IE10, my content area with overflow-y set would simply overflow. Effectively, the container was ignoring the height of its parent. This was really bizarre. I thought I was going to have to pull out some nasty CSS browser-specific hacks to overcome this issue.
With IE11, I noticed that, once I added a textbox at the top of the view to allow for having a variable number of rows in the table, the buttons at the bottom would overflow. Another IE bug left me scratching my head.
If you load the fiddle from yesterday in IE10 (or IE11 in IE10 mode) or IE11, you see these two bugs with a sufficient number of rows on the table:
After reviewing a list of bugs here, Philip Walton’s list of Flexbugs, I began playing with suggestions for fixes to related problems.
On the IE10 bug, this was relevant:
When IE 10 was being developed, the March 2012 spec said the initial value for the flex property was none, which translates to 0 0 auto. The most recent spec sets the initial flex value to the initial values of the individual flexibility properties, which corresponds to initial or 0 1 auto. Notice that this means IE 10 uses a different initial flex-shrink value (technically it was called neg-flex in the spec at the time) than every other browser. Other browsers (including IE 11) use an initial value of 1 rather than 0.
By adding ‘flex-shrink: 1’ to my scrollable content, the problem was solved.
In regards to the IE11 problem, while I didn’t find anything specific, I removed the ‘flex-basis’ on the button group and that resolved that issue.
Finally, I wanted this layout to at least degrade gracefully so that it, mostly, would look OK in IE9 or older browsers. This was a matter of having IE9, or lower, specific CSS to set the max-height of the scrollable content to some arbitrary percentage around 80%. This will at least produce the desired effect while not completely filling the user’s viewport as flexbox does.
Here’s the revised fiddle: