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

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• 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

[Karl Dubost]

This is fixed indeed. 
It doesn't reproduce anymore.

[Zack Pyle]

@Karl Dubost - Can you confirm which version this was fixed in so I can keep an eye out for it?

[Karl Dubost]

Zack, I'm not sure when it was fixed. Let's see.
It was reproducing at least in STP 206 and we are at STP 233

I also see it fixed on Safari 26.2
but it is reproducing on Safari 26.1

Checking
https://developer.apple.com/documentation/safari-release-notes/safari-26_2-release-notes

* Fixed automatic min-size handling for flex and grid items to correctly treat overflow: clip as non-scrollable, aligning with the CSS specifications. (158215991)

That seems like the right candidate. 
which would be Bug 297325