JSFiddle - React, Tailwind, and code Playground

by Spencer Wasden

HTML

<div class="page">

<div class="container">
  <div class="upper">
    content that can dynamically change
    <div>normally</div>
    <div>this</div>
  </div>
  
  <div class="lower">
    this should fill the remaining space and scroll if it has:
    <div>more content1</div>
    <div>more content2</div>
    <div>more content3</div>
    <div>more content4</div>
    <div>more content5</div>
    
  </div>
</div>
<div class="container">
  <div class="upper">
    content that can dynamically change
    <div>but sometimes</div>
    <div>it</div>
    <div>can</div>
    <div>grow</div>
  </div>
  
  <div class="lower">
    this should fill the remaining space and scroll if it has:
    <div>more content1</div>
    <div>more content2</div>
    <div>more content3</div>
    <div>more content4</div>
    <div>more content5</div>    
  </div>
</div>

</div>

CSS

.page{
  display: flex;
}
.container {
    display: flex;
    flex-direction: column;
    font: 20px Verdana;
    height: calc(100vh - 34px);
    background: grey;
    padding: 5px;
}
.upper{
    flex: 1 1; /* grow shrink */
    background: lime;
}
.lower{
    flex: 1 1; /* grow shrink */
    background: yellow;
    overflow-y: auto;
}
div{
    margin: 5px;
}