Flexbox grandchild height
Shows difference in behavior between Chrome and Firefox
HTML
<div id="flexy">
<div id="flexy1">
<div id="insideFlexy">
I am inside
</div>
</div>
<div id="flexy2">
</div>
</div>
CSS
#flexy {
display: flex;
flex-direction: row;
width: 500px;
background-color: black;
padding-right: 5px;
}
#flexy1 {
width: 100px;
background-color: blue;
display: flex;
align-items: stretch;
}
#insideFlexy {
background-color: cyan;
}
#flexy2 {
flex-grow: 1;
height: 300px;
background-color: white;
}