Height of flex element is not respected unless display: table is set? - html

Question

http://jsfiddle.net/u2zedzob/12/
<div class="wrapper">
<div class="main-content"></div>
<div class="footer"></div>
</div>
*, *:before, *:after {
box-sizing: border-box;
}
.wrapper {
background-color: red;
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
}
.main-content {
height: 100%;
width: 100%;
background-color: green;
}
.footer {
height: 30px;
width: 100%;
background-color: blue;
display: table;
}
In this example, the footer's height is 30px and main-content grows to fill the rest of the space. Perfect!
However, if I remove the display: table property of footer -- its height becomes 27.266px. This can also be prevented by setting the footer's min-height to 30px.
I'm not too familiar with flex logic. Why is this happening? Is there a more elegant solution where the height of footer will be respected? Maybe a flex property I am missing?

Answer 1

When working with flex box model you do not need to set height property for the child elements which should scale. Instead you would use e.g. the flex-grow property. In the given case where just one element should be scaled a value of 1 would be appropriate (as no proportions need to be defined here).
Have a look at the updated example where the height of the .main-content element is scaled according to the available space and the height of the .footer element is retained correctly by 30px without setting the display property:
http://jsfiddle.net/u2zedzob/21/
For further information maybe check this guide:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The flex-grow property is explained as:
This defines the ability for a flex item to grow if necessary. It
accepts a unitless value that serves as a proportion. It dictates what
amount of the available space inside the flex container the item
should take up.
If all items have flex-grow set to 1, every child will set to an equal
size inside the container. If you were to give one of the children a
value of 2, that child would take up twice as much space as the
others.