I've designed a basic example to illustrate a point.
#container {
height: 60%;
width: 50%;
border-style: double;
}
#inset {
padding: 2%;
border-style: groove;
height: 100%;
width: 100%;
}<div id="container">
Parent
<div id="inset">
Child
</div>
</div>I'm curious why the child div doesn't simply take up the remaining space of its parent div with both height and width set to 100% (Even without any text, the child div overflows).
I've noticed many people asking the same question, but they receive solutions rather than explanations. I'm working on mastering CSS, an area where I feel I lack expertise.
This is how I envisioned it would appear: https://i.sstatic.net/OE4Hv.png