There are many discussions about why height:100% doesn't work when parent div has no set height.But this time I found it weirdly does work with the below codes and i don't know why.
I don't set the height value to the parent box, so the height:100% should not work for the child box, but it does work, and the height value is 48px.
<div style=" display: flex; flex-direction: column; height: 200px; width: 200px; background-color: yellow;"><div class="parent" style="background-color: black"><div class="child" style="height: 100%; width: 100%; background-color: blue"><span style="line-height:24px">123</span></div><div class="child" style="height: 100%; width: 100%; background-color: red"><span style="line-height:24px">123</span></div></div></div>- When I remove the span element, the child box has no child element, the
height:100%is really not work. - When I remove the
height:100%, the height value is 24px,same as line-height which I think is correct. - So why does this happen?