Bug 157648 – Flex container width and height incorrectly calculated for `flex-flow: column wrap`

• Status: NEW
• Component: CSS

[Greg Whitworth]

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.

[Radar WebKit Bug Importer]

<rdar://problem/26616092>

[Philip Jägenstedt]

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?

[Philip Jägenstedt]

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.

[Ahmad Saleem]

Safari Technology Preview 179 matches Firefox Nightly 120 while differs from Chrome Canary 119 (fixed recently in Chrome 117).