JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="parent">

  <div class="content-sets-height">
    <h3>This part should be as tall as it needs to be to fit the content.</h3>
  </div>
  
  <div class="space-avail-sets-height">This part should take whatever height is remaining, and then use scrolling to view the content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit ipsum, vel, tenetur aperiam dolores a cum laboriosam omnis sint cumque beatae quis doloribus, id veniam vitae. Explicabo, libero dicta consequatur.</div>
  
  <div class="content-sets-height">This part should be as tall as it needs to be to fit the content.</div>
  
</div>

CSS

.parent {
  width: 200px;
  border: 1px solid #ccc;
  height: 300px;
  display: flex;
  flex-direction: column;
}


.space-avail-sets-height {
  overflow: auto;
}

.content-sets-height {
  flex-shrink: 0;
}










/* demo styles only*/
div {
  border: 1px solid #ccc;
  padding: 5px;
 }
 
 h3 {
   margin: 0;
   padding: 0;
 }