I'd like to understand why the green div with cyan border behaves like so in these cases.
Without extra wrapper:
.wrapper { display: flex; border: solid 2px black;}.red { width: 25px; height: 25px; background-color: red;}.green { height: 100%; background-color: green; border: solid 2px cyan;}.blue { width: 50px; height: 50px; background-color: blue;}<div class="wrapper"><div class="red"></div><div class="green"></div><div class="blue"></div></div>Result: Green div has zero height instead of blue's height.
With extra wrapper. Both with display flex:
.wrapper { display: flex; border: solid 2px black;}.red { width: 25px; height: 25px; background-color: red;}.green { height: 100%; background-color: green; border: solid 2px cyan;}.blue { width: 50px; height: 50px; background-color: blue;}<div class="wrapper"><div class="wrapper"><div class="red"></div><div class="green"></div><div class="blue"></div></div></div>Result: The green div has blue's height, as expected.
With extra wrapper. Only the grandparent with display flex:
.wrapper { display: flex; border: solid 2px black;}.red { width: 25px; height: 25px; background-color: red;}.green { height: 100%; background-color: green; border: solid 2px cyan;}.blue { width: 50px; height: 50px; background-color: blue;}<div class="wrapper"><div><div class="red"></div><div class="green"></div><div class="blue"></div></div></div>Result: The green div has blue + red + (cyan border * 2) height, as expected.
Why do I have to add a wrapper with display flex to make the height percentage work the way I expect it to work?
EDIT
Doing some tinkering I discovered something. In the first example, removing height: 100% (or setting it to auto) makes it grow. Why is it that when the green div has height auto it takes all the height of the parent (minus its own border) but not when it is set as 100%?
.wrapper { display: flex; border: solid 2px black;}.red { width: 25px; height: 25px; background-color: red;}.green { height: auto; background-color: green; border: solid 2px cyan;}.blue { width: 50px; height: 50px; background-color: blue;}<div class="wrapper"><div class="red"></div><div class="green"></div><div class="blue"></div></div>