There is an issue with the following code snippet 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>
This problem is specific to SCSS styling:
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
}
}
}
}
The expected behavior is for the second flexbox-container (.flex-item > div) to have the full height of the flex-child (.flex-item), but it doesn't work properly in Chrome.
A workaround using position absolute exists, but it's not preferred.
Codepen: http://codepen.io/anon/pen/QwpzLX
To see the desired result, open the code in Firefox, and to see the current situation, open it in Chrome.
Any suggestions or help would be greatly appreciated.