W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

[csswg-drafts] [css-flex][css-sizing] Should flex-shrinking propagate back down the flex chain?

From: François REMY via GitHub <sysbot+gh@w3.org>
Date: Mon, 24 Apr 2017 20:47:44 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-223946245-1493066863-sysbot+gh@w3.org>
FremyCompany has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flex][css-sizing] Should flex-shrinking propagate back down the flex chain? ==
What should happen if you have an auto-sized flexbox 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 left alone?

> 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. 

cc @tabatkins @fantasai @gregwhitworth 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1290 using your GitHub account
Received on Monday, 24 April 2017 20:47:51 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:11 UTC