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