Possible Fix for IE Bug 3.2.a

[Kenny-Moore]

In order to accomplish this I just wrapped the two flex containers that needed a min-height with another flex container with the flex direction set to column.

Am I misunderstanding the bug or is this a fix?

http://codepen.io/anon/pen/GgYBrR

[WillsB3]

I just came across the same solution..

Additionally, depending on your design, you might not even need an extra wrapper. In my (real world) case the flex item didn't have a background colour and flexbox was being used to centre two child elements both horizontally and vertically. The solution we went with just required us to duplicate the min-height rule from the flex-container onto the flex-item.

[philipwalton]

Hmmm, this actually seems to work pretty well.

The only problem I see that prevents this from being a foolproof workaround is it won't work if the min-height value is a percentage (since it will then be a percentage of the wrapper instead of the wrapper's parent), but it definitely seems worth adding as an option.

@gregwhitworth any sense of whether this will always work in IE 10-11? It seems fine in my testing.

[Kenny-Moore]

Is the problem of a min-height as a percentage related to the bug? Setting an element's height/width with percentages is a tricky business by itself. If we want to set the min-height of the elements as a percentage of its parent element my solution works fine so long as you set the wrapper's height to 100%.

The issue with this bug was that the flex-items were not using the parents height to perform their alignment calculations when that height was set via min-height. If I am understanding the bug correctly my solution would not be viable only if it was dependent on a particular unit of measurement to work.

To test the solution properly, we have to create an example of the buggy behavior using percentages. Which You can see here:

http://codepen.io/anon/pen/yyRdWK

If we apply the same fix (wrap the min-height flex containers in another flex container) and set the wrapper's height to 100% we fix this behavior:

http://codepen.io/anon/pen/JomQzV

Please let me know if this is a viable solution. This was my personal challenge for the week and I get to open my box of Tagalongs as soon as I find a suitable fix... Can I have a cookie now?

[Kenny-Moore]

One thing that might be of note: Flex items do not collapse margins. By using my fix you are turning your flex containers into flex items thus any margin set to those elements will stack... Just something to be aware of.

[philipwalton]

The solution you just showed works for my example, but it won't work generically, for all possible use cases. The fact is, if you need to set a min-height as a percentage, wrapping a flex item in a container doesn't help because eventually you have to apply the min-height declaration to the container, and then you face this bug.

[Kenny-Moore]

Ah, now I understand. I tried darn near everything to get a generic example to work but the only solutions I found were too janky to use. One required the use of two outer wrappers set to display: table and display: table-cell in addition to an flex wrapper. Then you had to animate the min-height with a delay. The other requires before and after tags and a complicated line-height hack but it caused both flex items to get larger when the one overflowed its min value. Thus I must accept defeat, it may yet be possible but I no longer wish to invest my energy.

However, all is not lost, VH's can be used in place of percentages in many cases so long as you are ok with using them. And if you are not mixing flex-containers with non flex siblings then my example
http://codepen.io/anon/pen/JomQzV should work for you just fine!

[philipwalton]

I'm going to reopen this as I think it's still very much worth documenting turning the flex item into a flex container for situations where a percentage min-height isn't required.