Flexbox child collapsed after aligning - css

Question

Can't figure out how to keep the child items same height on both sides after aligning their content to the middle.
My aim is to create a layout as seen in picture:
<div class="halves">
<div class="half">
<div class="half-inner is-right">H1</div>
</div>
<div class="half">
<div class="half-inner is-left">H2
<br> asdfs df <br>a sdfadsf sdfa dadsf df asdf afdf sadf asdf </div>
</div>
.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
/* align-items: center; */
display: flex;
.half-inner{
max-width: 100px;
&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}
}
}
}
My current code here: http://codepen.io/zsitro/pen/YqpLba
In my example uncommenting /* align-items: center; */ you can see the child item collapses.
I appreciate any guidance. ty

Answer 1

align-items: center forces the div into the center of a flex container, and in the event of no specific declarations of width/height/flex-basis/whatnot, it makes the div as big as its content, preserving the whitespace. If you want the div to stretch, you will need the the align-items value to be stretch so it takes up the entire height of the parent container.
Additionally, if you want the .half-inner divs to be equal in width: flex: 1 (or flex-grow: 1) is a child property, so the declaration you currently have only applies to the .half divs, not the .half-inner divs. Since the parent .half div is a flex container, you can just add flex:1 under the .half-inner CSS and you should be good to go.
.halves{
display: flex;
border: 5px solid red;
.half{
flex: 1;
border: 10px solid yellow;
align-items: stretch;
display: flex;
.half-inner{
max-width: 100px;
flex: 1;
&.is-right{
margin-left: auto;
background: pink;
}
&.is-left{
background: green;
}
}
}
}