JSFiddle - React, Tailwind, and code Playground

HTML

<div class=div1>
  div1<br>
  div1<br>
  div1<br>
</div>

<div class=div2>
  div2<br>
  div2<br>
  div2<br>
</div>

<div class=div3>
  div3<br>
  div3<br>
  div3<br>
</div>

CSS

* {
      padding:0;
      margin:0;
    }
    
    html, body {
      height:100%;
      
      display:flex;
      flex-direction:column;
    }
    
    body > * {
      flex-shrink: 0;
    }
    
    .div1 {
      background-color: yellow;
    }
    
    .div2 {
      background-color: darkorange;
    }

    .div3 {
      background-color: orange;
      flex-grow: 1;
    }