Flex Items Grow too Tall with flex-direction:column

[jpdevries]

I've been working on a flexbox layout for a media browser and have run into what I believe to be a flexbox bug in Firefox. I've also noticed the same issue in Spartan.

TL;DR

I've created a codepen to show the issue. Have a look in Firefox 37 and see notes on lines 72 and 110 of the CSS source.

Screenshot

Safari (correct, top left), Firefox (incorrect, right), Spartan (incorrect, bottom left)

Description

With the box model the child affects the parent. With flexbox, the parent and siblings affect the child. Webkit seems to be the only engine to fully grasp this; or I’ve lost my mind. Could be that too.

Webkit and non-Webkit browsers seem to disagree on how to handle intrinsic container sizing on elements with a display:flex;flex-direction:column; parent. For example, if we have a look at the codepen in Firefox 37 and uncomment line 110 we see that our tbody, seen below in red, is the perfect size it should be:

It fills the remaining space just like we want. Isn't that lovely? Now if only it would stay that way! The concept of this "holy grail" layout is that the topbar and footer are always visible and our tbody content area uses overflow-y:auto to scroll it's innerContent if needed. The problem is non-Webkit browsers allow the tbody container to grow as tall as it's innerContent, rather than stay the size the flexbox spec says it should be. In other words, once you add enough content to your tbody rather than kicking in scrollbars the tbody will just keep getting taller, breaking the layout entirely.

Notice in the codepen everything from the body down to the tbody uses flexbox. I did this in an attempt to ensure to rid out any traditional box model layout rules that Firefox may apply but it was to no avail, it lets the parent grow unless we set an explicit height or max-height. This is not a solution because

• the whole point of flexbox is to not need to do something like this
• due to the nature of our layout being flexible we can't just use something like percentages
• calc() doesn't work here either (see line 71)

See also

Possibly related to #8
Possibly related to #26
Possibly related to #41
Also see jpdevries/eureka#8

[jpdevries]

Notes

The default flex behavior of flex items has changed. In Internet Explorer 10, flex items that didn't fit their containers overflowed the margins of the container or clipped to the margins of the container. Starting with IE11, these items now shrink to fit their containers (up to the min-width value, if specified). Use the flex-shrink property to change this behavior.
https://msdn.microsoft.com/en-us/library/dn265027%28v=vs.85%29.aspx

You can control how excess space along a parent box's layout axis is proportionately distributed to child elements. By using the -ms-flex property, you can make flexbox items "flex," altering their width or height to fill the available space. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.
When the element containing the -ms-flex property is a flexbox item, the -ms-flex property is consulted instead of the width or height properties to determine the main size of the element. (If an element is not a flexbox item, the -ms-flex property has no effect.)
https://msdn.microsoft.com/en-us/library/hh673531%28v=vs.85%29.aspx

[jpdevries]

Ok so I think I finally figured something out... it comes down to
flex-basis:0 vs flex-basis:0%

Safari (correct, right), Firefox (correct, top left), Spartan (correct, bottom left)

I forked the above codepen here, which works in Spartan and Firefox. 🎉

I used Spartan and Firefox CSS hacks to set flex-basis:0 rather than flex-basis:0%. (Webkit wants you to use flex-basis:0% or flex-basis:100% (try either). Firefox and Spartan want flex-basis:0)

Lastly, I forked one more time with this pen and removed the CSS hacks and took advantage of the ability to use flex-basis:0;-webkit-flex-basis:0%. If Webkit drops the prefix, that won't work of course. Oh wait...that doesn't work because Spartan will acknowledge the -webkit-flex-basis:0% and break itself!!! 😧

Conclusion

It's annoying that Project Spartan masks itself as webkit because as I've demonstrated it does not absolutely mimic it's behavior.

I'm not sure which browser engine, if any, properly conform to the flexbox spec in this scenario but I think if you had to pick one it would be webkit :/

[philipwalton]

If you apply flex-shrink:0 to your top bar, thead, and footer the layout works just fine. Keep in mind that the default flex-shrink value is 1.

[jpdevries]

@philipwalton hm, i've forked the original pen, removed bourbon, added autoprefixer, and applied flex-shrink:0 to the top bar, thead, and footer but am not seeing the desired result. Could i be missing something?
http://codepen.io/jpdevries/pen/doYYoR

However notice in this pen, if I set flex-basis:0 on the tbody it works in Chrome, Canary, Safari, Firefox and sort of Edge.

[rliuyi]

hello, I ran into an issue which is similar to jpdevries's issue. Please see my question in stackoverflow.

[garrettw]

@rliuyi No one knows where to find your question in StackOverflow.

[rliuyi]

@garrettw I forgot to link sth: https://stackoverflow.com/questions/49662361/firefox-flex-how-to-prevent-flex-items-from-growing-to-tall-with-flex-directio