Overflow ignored on Flex item in IE11

[Undistraction]

I have a flexbox based layout that involves a centered container comprising of a header and body.The container has a minimum height to prevent it collapsing too much if there is little content in its body. It also has a max-height defined as a percentage of its container.

The header is a fixed height, and the body is set to overflow-y: auto. In Chrome, Safari and Firefox, this means:

• If there is little body content, the container collapses down to its min-height.
• As the amount of body content increases, the body (and therefore the container) expand vertically.
• If the increase in body content means the container reaches its maximum height, the body's vertical scrollbar is triggered.

However in IE11, if the body content increases in height beyond the available space it (sometimes) extends out beyond the confines of the container (resizing the window sometimes triggers this issue and sometimes fixes it).

There is a Codepen here

I thought this was related to 3. min-height on a flex container won't apply to its flex items, which states:

For some reason nested flex containers are not affected by this bug

However the fix doesn't work (setting flex-direction: column on the wrapping flexbox), as can be seen in the Codepen.

As a bonus bug which may or may not be related, Chrome fails to correctly resize the nested Flexbox if the height of the viewport is increased, although decreasing the viewport height immediately triggers the correct layout. Happy to add this as a separate issue if you like.

[philipwalton]

There are a lot of differences between your example and mine. Two of those things appear to be significant:

1. Your container is position: absolute.
2. Your container uses align-items: center.

If I remove those, it appears to work, at least as far as I can tell: http://codepen.io/anon/pen/gpEREr?editors=110

Perhaps I should add that the container fix needs to be just a pure container with only the CSS I show in my example. What do you think?

[Undistraction]

I think we are talking about two separate issues:

1. If the inner flexbox has 'align-items: center;` then the fix will not work. You should add that as a note.
2. There is a separate issue effecting Chrome which is that there is no re-calculation of flexbox height if the browser window is increased in height, though there is if it is decreased. I will try and simplify the Codepen and open as a new issue.