In the following code, child's (inline-block) width expands to 100% of it's parent's computed width but I do not know as to why the height of the .child does not expand to the .parent's computed height.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.ancestor {
height: 250px;
border: 1px solid green;
}
.parent {
display: block;
padding: 20px;
border: 1px solid #474747;
background-color: #fff;
}
.child {
display: inline-block;
width: 100%;
height: 100%;
background-color: pink;
}<div class="ancestor">
<div class="parent">
<p class="child">
Lorem ipsum dolor sit amet, consectetur adipisicing.
</p>
</div>
</div>I am more interested in knowing the logic behind this behaviour rather than a solution. Can someone, pls explain this happens.
Thanks