CSS - How to force elements to 100% of remaining/available space of parent element without extending beyond it?

Question

This seems like a really amateur question, in my opinion, but nonetheless it\'s still a frustrating anomaly.

This is actually the 2nd part of a 2 part problem. The firs

Answer 1

I believe the proper solution to something like this is using a flexbox. Flexbox has great support the lately with all modern browsers.

Use following for the parent

.stretch-items {
  display: flex;
  flex-direction: column;  
}

And for the item that should grow

.stretch-items .stretch {
   flex-grow: 1;  
}

Here is a codepen demonstrating it https://codepen.io/giorgosk/pen/NWWaqPO

Answer 2

You can use absolute positioning.

#b {
    width: 40em;
    height: 20em;
    position:relative;
    background: red;
}
#c {
    position: absolute;
    top: 1em;
    bottom: 1em;
    left: 1em;
    right: 1em;
    background: blue;
}

<div id="b">
    <div id="c">
    </div>
</div>