JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="wrapper-inner">
    <div class="item">


      <div class="titel">Titel here...</div>
      <div class="content">
        <div class="content-inner">
          content goes here. this box has to grow until the space is filled.
        </div>
        
      </div>
      <div class="footer">gg</div>
    </div>
  </div>


</div>

SCSS

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.wrapper {
  background: rgba(red, 0.3);
  display:flex;
  min-height:100vh;
  //align-items: center;
  justify-content:center;
  //flex-direction:column;
  
  .wrapper-inner {
    padding:20px;
    max-width:80%;
    min-height:100%;
    //max-height: 500px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background: rgba(green, 0.42);
    
  }
  .item {
    width:100%;
    //min-height:100%;
    display:flex;
    flex-direction:column;
    min-height:300px;
    max-height:500px;
    flex-basis: 100%;
    background:#fff;
  }
  
  .titel,
  .content,
  .footer {
    padding:10px;
    background: rgba(#000, 0.2);
    margin-bottom:10px;
  }
  .content {
   flex-grow:1;
  }
  
  .content-inner  {
    //height:100%;
  }
  
}