If IE11 renders wrong flexbox heights ...

2017-03-09 | #css, #solution, #webdev

You've most likely discovered the infamous IE-Flexbox height bug, which is a mixture of flex-direction column and self sizing elements like images inside containers, which then, in turn, do no update their height if the containing element resizes itself. It's all very weird. And the solution is even weirder! If you have such a container, that keeps some arbitrary height, although the content is smaller, there's no stretch active and it has no flex-grow, you might try this:

.container-around-container-being-too-high {

display: flex;

flex-direction: column;

}

.container-being-too-high {

/* IE11 flexbox fix for elements containing self-sizing images */

min-height: 1px;

}

Its crazy weird, but it works!

PS: Have a look at the links for references on other bugs, techniques and availability of flex features