Flexbox, min-height, margin auto and Internet Explorer

Question

I use both display: flex and margin: auto to play to have the following layouts:

This works well in every browser that supports Flexbox, even IE.
However, it would be too easy if there were no exception: min-height .

Here you can find a simple working example. When using min-height on my wrapper, the last element is not marked at the bottom of this shell (IE only).

I can't get this to work, do you have any ideas / girls? Thanks.

Testing for IE11

 .wrapper { display: flex; flex-direction: column; min-height: 300px; border: 1px solid grey; padding: 5px; } .element { height: 35px; border: 1px solid grey; margin: 5px; } .element:last-child { margin-top: auto; } 

 <div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> 

Answer 1

This is a bug in the implementation of IE flexbox :

In all other browsers that support flexbox, a flex-direction:column based flexible container will evaluate min-height containers to calculate flex-grow lengths. In IE10 and 11-preview, it only works with an explicit height value.

Error Report - ( https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11 -preview # tabs )

It looks like this is on Microsoft radar and will be fixed in the future:

Unfortunately, we cannot address this feedback in our upcoming release. We will review your feedback on a future version. We will keep this connection error active for tracking this request.

Microsoft answer - ( https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11 -preview # tabs )

For now, a simple solution is to use height:

 .wrapper { border: 1px solid grey; box-sizing: border-box; display: flex; flex-direction: column; height: 300px; padding: 5px; } .element { border: 1px solid grey; height: 35px; margin: 5px; } .element:last-child { margin-top: auto; } 

 <div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> 

But this has the limitation that the box will not grow if more .element is .element , so this is probably not what you need.

This seems to be a pretty hacky way to achieve this, although it requires an additional containing element:

 .container { display: table; min-height: 300px; width: 100%; } .wrapper { border: 1px solid grey; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; min-height: 300px; padding: 5px; } .element { border: 1px solid grey; height: 35px; margin: 5px; } .element:last-child { margin-top: auto; } 

 <div class="container"> <div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> </div> 

This adds a container ( .container ), sets it to display: table; and gives it max-height: 300px; . height: 100%; then added to .wrapper so that it matches the full height of .container (effectively 300px ), thereby making IE behave the same as other browsers.

Compatible browsers ignore this and will continue to follow the min-height: 300px; rule min-height: 300px; installed on .wrapper .

Answer 2

Here's another solution:

Adding an additional container with two elements:

• 300px high item
• your ".wrapper"

 .container { display: flex; } .min-height-fix { flex: 0 0 auto; height: 300px; /* the "min-height" */ width: 1px; /* DEBUG */ background: red; /* DEBUG */ } .wrapper { flex: 1 1 auto; display: flex; flex-direction: column; /*min-height: 300px;*/ border: 1px solid grey; padding: 5px; flex-wrap: wrap; } .element { height: 35px; border: 1px solid grey; margin: 5px; } .element:last-child { margin-top: auto; } 

 <div class="container"> <div class="min-height-fix"> </div> <div class="wrapper"> <div class="element"></div> <div class="element"></div> <div class="element"></div> <div class="element"></div> </div> </div>