JSFiddle - React, Tailwind, and code Playground

HTML

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

SCSS

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

  
}