Upon setting the height of a container element to 200px, I encountered an issue when trying to set the height of another element within it to 100%. The height didn't render as expected, as height:100% takes the height of the parent element, which was not explicitly defined. However, when I applied position: absolute, the percentages started reflecting the parent class's height, albeit slightly off at 204px instead of the expected 200px.
My inquiry revolves around the mysterious 4px difference and why setting position: absolute seemed to resolve the percentage issue, even without a set height in the parent class. Could you shed some light on why 100% equated to 204px instead of 200px in this scenario? View image reference here.
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
div {
display: inline-block;
width: 50px;
}
.container {
position: relative;
width: 100%;
}
.test {
height: 200px;
background-color: aqua;
}
.test2 {
height: 100%;
position: absolute;
background-color: blue;
}<div class="container">
<div class="test"></div>
<div class="test2"></div>
</div>My question remains focused on unraveling the mystery of the 4px discrepancy and the change in percentage behavior after utilizing position: absolute, especially in the absence of a specified height in the parent class.