[Webkit-unassigned] [Bug 281973] New: [css-flexbox] Content disappears when combining flex-direction: column, flex: 1 1 0, and overflow: hidden
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Wed Oct 23 05:59:48 PDT 2024
https://bugs.webkit.org/show_bug.cgi?id=281973
Bug ID: 281973
Summary: [css-flexbox] Content disappears when combining
flex-direction: column, flex: 1 1 0, and overflow:
hidden
Product: WebKit
Version: Safari 18
Hardware: Unspecified
OS: macOS 15
Status: NEW
Severity: Normal
Priority: P2
Component: CSS
Assignee: webkit-unassigned at lists.webkit.org
Reporter: zack at pyledigital.com
CC: koivisto at iki.fi
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 */
}
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20241023/de76fe85/attachment.htm>
More information about the webkit-unassigned
mailing list