Stacked flexbox vertical centering not working in chrome - css

Question

The following situation doesn't work in Google Chrome;
<div class="flex-container">
<div class="flex-item">
<div>
<div>
<h2>This is a test</h2>
</div>
</div>
</div>
<div class="flex-item">
<div>
<div>
<h2>This is a test</h2>
</div>
</div>
</div>
<div class="flex-item">
<div>
<div>
<h2>This is a test</h2>
</div>
</div>
</div>
</div>
SCSS
body,html {
height:100%;
background:#1D1F20;
font-family:sans-serif;
color:#fff;
}
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
height:100%;
.flex-item {
flex: 1 1 auto;
align-self: center;
background:#87BEB7;
padding:0 10px;
&:nth-child(2) {
background:#ADBEBC;
}
&:nth-child(3) {
background:#BE8A74;
}
> div {
display: flex;
justify-content: center;
align-items: flex-start;
height:100%; // This seems to be the issue
div {
flex: 0 1 auto;
align-self: center;
background:#5C726F;
padding:10px
}
}
}
}
I would expect the second flexbox-container (.flex-item > div) to be the full height of the flex-child (.flex-item) but it doesn't seem to work. (chrome only)
The workaround I have involves using position absolute, but i'd rather not use it.
Codepen: http://codepen.io/anon/pen/QwpzLX
Open in Firefox to see the desired result and in Chrome to see the current situation.
Any help or suggestions would be appreciated.

Answer 1

Here is the working scss:
.flex-container {
display: flex;
flex-direction: column;
align-items: center;
height:100%;
.flex-item {
flex: 1 1 auto;
align-self: center;
background:#87BEB7;
padding:0 10px;
display: flex;
&:nth-child(2) {
background:#ADBEBC;
}
&:nth-child(3) {
background:#BE8A74;
}
> div {
display: flex;
justify-content: center;
align-items: flex-start;
div {
flex: 0 1 auto;
align-self: center;
background:#5C726F;
padding:10px
}
}
}
}
You have to set display:flex; to .flex-item and remove the height: 100%.
Here is the demo: http://jsfiddle.net/omgL91r8/1/