Bug 157648 - Flex container width and height incorrectly calculated for `flex-flow: column wrap`
Summary: Flex container width and height incorrectly calculated for `flex-flow: column...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2016-05-12 17:11 PDT by Greg Whitworth
Modified: 2021-02-02 05:32 PST (History)
5 users (show)

See Also:

Screenshot from STP 119. (164.67 KB, image/png)
2021-02-02 05:30 PST, Philip Jägenstedt
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Greg Whitworth 2016-05-12 17:11:24 PDT
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
    Safari: FAIL
    Firefox: FAIL
    IE 7/8/9/10: FAIL
    Chrome: FAIL
    Edge: OK

What steps will reproduce the problem?
1. Go to http://codepen.io/anon/pen/pJLwYp
2. Notice how the containing <ul> does not actually contain it's <li> children. It's size is being incorrectly calculated.

What is the expected result?

The <il> children should be contained no matter how they wrap and no matter how many children are present.
If you look at the demo in Edge, it renders correctly.

What happens instead?

The containing <ul> does not fully contain its children.
Comment 1 Radar WebKit Bug Importer 2016-06-02 20:18:09 PDT
Comment 2 Philip Jägenstedt 2021-02-02 05:30:09 PST
Created attachment 418984 [details]
Screenshot from STP 119.

I'm trying to figure out what the current status of implementation is here, and testing http://codepen.io/anon/pen/pJLwYp in Chrome, Firefox and Safari I get almost identical renderings, attaching the screenshot from STP 119.

Are there tests in WPT about this behavior?
Comment 3 Philip Jägenstedt 2021-02-02 05:32:57 PST
I've found that https://bugs.chromium.org/p/chromium/issues/detail?id=507397 is the corresponding Chromium bug for this, linking to the same test case. There may be useful discussion/links there.