JSFiddle - React, Tailwind, and code Playground

by Steve Muchow

HTML

<div class=div1>
  <div class=div1-inner>div1 data sddssd sdsd ds ds sd sd sddssddsds sdsdsdsd dssds<br>
  </div>
  div1<br>
  div1<br>
</div>

<div class=div2>
<div class=one>
  <div class=tree-control-container>
    <div class=tree-list>
      <div class=list-inner>
    <p>
    
    data sddssd sdsd ds ds sd sd sddssddsds sdsdsdsd dssds</p>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    data<br>
    </div>
    </div><br>
<!--
    <div class=tree-entry></div>
  -->
  </div>
</div>
<div class=two></div>
</div>

<div class=div3>
  div3<br>
  div3<br>
  div3<br>
</div>

CSS

* {
      padding:0;
      margin:0;
    }
    
    html, body {
      height:100%;
      
      display:flex;
      flex-direction:column;
    }
    
    body > * {
      flex-shrink: 0;
    }
    
    .tree-control-container {
      display:flex;
      margin: 0px;
/*        position: relative; */
      padding: 0px;
      background-color: red;
      min-height: 1px;
      min-width: 1px;
      height:100%;
      width:inherit;
    }
    
    .tree-list {
      background-color: beige;
      width:inherit;
      min-width: 1px;
      margin: 5px;
      padding: 5px 10px 5px 10px;
      margin-bottom: 105px;
      min-height: 1px;
      flex-grow: 1;
      border: 0px solid white;
      overflow: scroll;
      overflow-x:hidden;
      
    }
    
    .list-inner {
      width: 300px;
      height: inherit;
      overflow-x: scroll;
      background-color:azure;
    }

    .tree-entry {
      background-color: azure;
      width:100%
      height: 105px;
      min-height: 105px;
      min-width: 1px;
      border: 0px solid black;
      flex-grow: 0;
      bottom:0;
      position:absolute;
    }

    .one {
      width: 300px;
      min-height: 100px;
      max-height: 900px;
      background-color:gray;
      float: left;
      height: 100%;
    }
    
    .two {
      margin-left: 300px;
      min-height: 100px;
      max-height: 900px;
      background-color:black;
      height: 100%;
    }
    
    .div1 {
    
      background-color: yellow;
      width: 300px;
    }
    .div1-inner {
      background-color: yellow;
      overflow-x: hidden;
      
    }
    
    .div2 {
      background-color: darkorange;
      height: 100px;
      max-height: 900px;
      flex-grow: 1;
    }

    .div3 {
      background-color: orange;
      flex-grow: 0;
    }