JSFiddle - React, Tailwind, and code Playground

by Steve Muchow

HTML

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

<div class=ab-body-wrapper>
  <div class=ab-test-browser-container>
    <div class=tree-control-container>
      <div class=tree-list>
        <div class=list-inner>
          <!-- data sddssd sdsd ds ds sd sd sddssddsds sdsdsdsd dssds 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> 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 class=entry-inner>ddd entry inner data</div>
      </div>
    </div>
  </div>
  <div class=ab-test-content-container>
    <div class=tab-view>
      <div class=tab-inner>
        dsdsd
      </div>
    </div>
  </div>
</div>

<div class=ab-footer>
  div3
  <br> div3
  <br> div3
  <br>
</div>

CSS

* {
      padding: 0;
      margin: 0;
    }
    
    html,
    body {
      height: 100%;
      display: flex;
      display: -webkit-flex;
      flex-direction: column;
      -webkit-flex-direction: column;
    }
    
    body > * {
      flex-shrink: 0;
      -webkit-flex-shrink: 0;
    }
    
    .tree-control-container {
      display: flex;
      display: -webkit-flex;
      margin: 0px;
      /*        position: relative; */
      padding: 0px;
      background-color: red;
      min-height: 1px;
      min-width: 1px;
      height: 100%;
      width: inherit;
      position: relative;
    }
    
    .tree-list {
      background-color: beige;
      width: 100%;
      min-width: 1px;
      margin: 5px;
      padding: 5px 10px 5px 10px;
      margin-bottom: 105px;
      min-height: 1px;
      -webkit-flex-grow: 1;
      flex-grow: 1;
      border: 0px solid white;
      overflow-y: auto;
      overflow-x: auto;
    }
    
    .list-inner {
      width: 300%;
      height: inherit;
      background-color: azure;
    }
    
    .tree-entry {
      background-color: brown;
      width: 100%;
      min-height: 105px;
      border: 0px solid purple;
      flex-grow: 0;
      -webkit-flex-grow: 0;
      bottom: 0;
      left: 0;
      position: absolute;
    }
    
    .entry-inner {
      height: 105px;
      background-color: gainsboro;
      margin: 5px 5px 5px 5px;
      min-height: 1px;
      padding: 5px;
    }
    
    .ab-test-browser-container {
      width: 300px;
      min-height: 100px;
      max-height: 1900px;
      background-color: gray;
      float: left;
      height: 100%;
    }
    
    .ab-test-content-container {
      margin-left: 300px;
      min-height: 100px;
      max-height: 1900px;
      background-color: black;
      height: 100%;
      flex-grow: 1;
    }
    
    .tab-view {
      margin: 0px 0px 0px 0px;
      padding: 5px;
      background-color: gainsboro;
      width-min: 1px;
      height-min: 1px;
      width: 100%;
     ...