[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