JSFiddle - React, Tailwind, and code Playground

by nicolasrannou

HTML

<div class="container">
  <div class="f f1">
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
  </div>
  <div class="f f2">
     <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
  </div>
</div>

<div class="container">
<div class="fcontainer">
<div>Some extra content</div>
  <div class="f f1">
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
  </div>
  <div class="f f2">
     <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
    <div>LOTS OF CONTENT</div>
  </div>
  </div>
</div>

CSS

.container {
  height: 100px;
  display: flex;
  flex-direction: column;
}

.fcontainer {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.f {
  -webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
flex: 1;
min-height: 0;
max-height: au;
height: auto;
}

.f1 {
  background-color: blue;
}

.f2 {
  background-color: red;
}