-
Notifications
You must be signed in to change notification settings - Fork 752
Description
What should happen if you have an auto-sized flexbox that is itself child in yet another flexbox, and the inner flexbox is asked to shrink to fit its parent, but it contains items (that could be shrinked to fit but) would not shrink if the auto flexbox was not itself in a flexbox?
https://wptest.center/#/xko2l5 (auto flexbox by itself)
https://wptest.center/#/24hxs8 (auto flexbox in a flexbox)
Firefox and Edge both react the same way here, and the fact the flexbox is itself in a flexbox does not affect its layout. It is layouted as a height:auto flexbox, then the parent flexbox deals with that. In Chrome, however, the fact the flexbox is a shrink-candidate seems to make the flexbox behave as if it had a height set to its final size, and force-skrink its content.
Please note everybody agrees that an auto flexbox that is not a flex item will let its content grow to avoid any scrollbar, per:
The min-content-size of an element is the smallest size a box could take that doesn’t lead to overflow that could be avoided by choosing a larger size. https://drafts.csswg.org/css-sizing/#min-content
However, if the flexbox had an height, flexing will apparently allow scrollable elements to shrink below their min-content-size:
https://wptest.center/#/snl1k1 (flex-shrink default to 1, the element shrinks to fit its parent)
If you put flex-shrink:0 on the scrollable element, all browsers stop shrinking it:
https://wptest.center/#/hiv3y7 (flex-shrink is now 0, the element overflows)
It is not clear to me that the sizing of the inner flexbox’s items should depend on the fact the flexbox is itself an item in a flexbox.