How to make the middle of 3 DIVs stretch to fill up vertically

Question

Please see the below snippet.

.frame {
  height:10em;
  padding:2px;
  border:solid 1px black
}

.title {
  height:2em;
  overflow-y:scroll;
  border:solid 1px green
}

.body {
  height:100%; //??
  overflow-y:scroll;
  border:solid 1px red
}

.footer {
  border:solid 1px blue
}

 <div class="frame">
   <div class="title">
     headline
   </div>
   <div class="body">
     <p>... body ... </p>
   </div>
   <div class="footer">
     <textarea style="height:2em;width:95%"></textarea>
   </div>
<div>

Is it possible to make the red (.body) div fill up the gap between the green (.title) and blue (.footer) divs and have all three to fit perfectly in the black frame without computing heights in a script?

might be a duplicate of http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486 or http://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space/23090449 — G-Cyrillus, May 15 '17 at 18:00

Daniel Beck · Accepted Answer · 2017-05-15T18:04:27.787

It's trivial in flexbox -- use specific heights on elements where you want that, and flex-grow:1 on the element that should fill the remaining space.

.frame {
  height:10em;
  padding:2px;
  border:solid 1px black;
  display:flex;
  flex-direction: column
}

.title {
  height:2em;
  border:solid 1px green
}

.body {
  overflow-y:scroll;
  border:solid 1px red;
  flex-grow: 1
}

.footer {
  border:solid 1px blue
}

<div class="frame">
   <div class="title">
     headline
   </div>
   <div class="body">
     <p>... body ... </p>
   </div>
   <div class="footer">
     <textarea style="height:2em;width:95%"></textarea>
   </div>
<div>

If you need to support pre-flexbox browsers -- which means older IE, pretty much -- it's decidedly less trivial. Off the top of my head I'm not sure it's possible. I would take it as an opportunity to practice the phrase "degrades gracefully."

How to make the middle of 3 DIVs stretch to fill up vertically

1 Answers1