Bug 281973 – [css-flexbox] Content disappears when combining flex-direction: column, flex: 1 1 0, and overflow: hidden

• Status: NEW
• Component: Layout and Rendering

[Zack Pyle]

When combining the following CSS properties on a flex container and its children:

Parent: flex-direction: column
Children: flex: 1 1 0
Children: overflow: hidden or overflow: clip

The flex items completely disappear in Safari, while displaying correctly in other browsers.

Expected result:
Cards should be visible and expand to fill available space while maintaining their content height

Actual result:
- Cards completely disappear in Safari
- Works correctly in Chrome and Firefox

Workarounds:
- Using flex: 1 1 auto instead of flex: 1 1 0

Live demo: https://codepen.io/pyledigital/full/Jjgrxrm

Steps to reproduce:

1. Open the Codepen in Safari and reduce screen width to less than 800px
2. Note that the cards are not visible once it flips to flex-direction: column
3. Open the same Codepen in Chrome or Firefox to see the expected behavior

The issue occurs when combining these properties:

.flex-parent {
    display: flex;
    flex-direction: column;
}

.card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    overflow: hidden; /* or clip */
}

[Zack Pyle]

Confirmed happens in both Safari 17 & 18, so not a new bug

[Radar WebKit Bug Importer]

<rdar://problem/138912808>

[Karl Dubost]

Created attachment 473182 [details]
rendering in safari, firefox, chrome



Safari Technology Preview  206           20621.1.3.21.1
Firefox Nightly            134.0a1       13424.11.7
Google Chrome Canary       132.0.6825.0  6825.0