Set height of CSS flex elements to the same amount? - html

Question

I have 2 divs next to each other that I center vertically and horizontally using flex and justify-content/align-items.
Example
HTML:
<div class="inner">
<div class="section green">
<img src="http://i.imgur.com/hEOMgVf.png">
</div>
<div class="section red">
<img src="http://i.imgur.com/nEybO1g.png">
</div>
</div>
CSS:
.inner {
float: left;
width: 500px;
display: flex;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
}
.section {
float: left;
flex: 1;
}
.green { background-color: #7dc242; }
.red { background-color: #ed1c24; }
My issue is that I need to set the height of both 'section' divs to the same as well as centering them vertically and horizontally. You can see in the JSFiddle below that the green background isn't the same height as the red. How can I make both divs the full height of the container div?
Here's a simplified JSFiddle of what I have:
http://jsfiddle.net/beK28/1/

Answer 1

To achieve the effect you want, you shouldn't try to do any of the alignment in the container element and instead should set .section to also be display:flex. Then you can justify and center the images correctly within the children elements.
.section {
align-items: center;
display: flex;
flex: 1;
justify-content:center;
text-align: center;
}
http://jsfiddle.net/beK28/8/
You also don't need to use float, that's the whole point of using flexible containers.

Answer 2

Your elements aren't stretching vertically anymore because you've set align-items: center. If you want them to be equal height, it has to be the default value of stretch. If your elements were multi-line, then you could use align-content: center instead, which will give you the effect you're looking for. For single-line flex items, it does not appear that you can have vertical centering + equal height through Flexbox alone.
http://jsfiddle.net/beK28/6/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
background-color: #343434;
text-align: center;
height: 500px;
}
Note, however, that you can have flex items with the display property of table-cell.
http://jsfiddle.net/beK28/7/
.inner {
float: left;
width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #343434;
text-align: center;
height: 500px;
}
.section {
display: table-cell;
flex: 1;
}

Answer 3

I've had problems with stretch/centering before, and ended up formatting as display: table-cell:
.inner {
float: left;
width: 500px;
display: table;
background-color: #343434;
text-align: center;
}
.section {
display: table-cell;
width: 50%;
vertical-align: middle;
}