UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce the problem:
1. Create a wrapper with a fixed height, overflow:scroll and display:flex
2. Add a first child (#content) with flex-grow:1, display:flex, and many children (or a big one)
3. Add a second child (#footer) with a fixed height

What is the expected behavior?
The #footer should never appear on overlay of the #content, since the wrapper lay them out with a flexbox. Yet it's what happens. See example for a very simple reproduction case.

What went wrong?
It seems the layout is done in a wrong order, and the overflow:scroll is taken into account too soon. The footer is positioned at the bottom of the wrapper height, like if it had a position:absolute+bottom:0 rule.

The expected layout algorithm is:
1. Layout the wrapper children using the flexbox algorithm first, they will overflow the wrapper since their intrinsic size is too large, so let them overflow the wrapper.
2. Apply the overflow: scroll on the wrapper, to hide the overflown elements and propose a scrollbar.

Note that this issue does not appear if the first child (#content) is not a flexbox itself.

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 68.0.3440.106  Channel: stable
OS Version: OS X 10.13.6
Flash Version:
 

Deleted: flexbox-issue.png 47.0 KB

	flexbox-issue.png 47.0 KB View Download

Deleted: flexbox-issue.html 728 bytes

flexbox-issue.html 728 bytes View Download