Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[css-flex][css-sizing] Should flex-shrinking propagate back down the flex chain? #1290

@FremyCompany

Description

@FremyCompany

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.

cc @tabatkins @fantasai @gregwhitworth

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions