JSFiddle - React, Tailwind, and code Playground

by gentooboontoo

HTML

<div class="body">
    <div class="main-header">Main header</div>
    <div class="main-content">
        <div class="record-list">
            <div class="list">
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
            Bidule<br/>
        </div>
        </div>
        <div class="report-content"></div>
    </div>
</div>

CSS

.body {
    width: 640px;
    height: 480px;
    background: yellow;
    
    /* flexbox setup */
    display: -webkit-box;
    -webkit-box-orient: vertical;

    display: -moz-box;
    -moz-box-orient: vertical;

    display: box;
    box-orient: vertical;
}

.main-header {
    height: 25px;
    background: red;
}

.main-content {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  background: blue;
  /*overflow: auto;*/
    
  /* flexbox setup */
  display: -webkit-box;
  -webkit-box-orient: horizontal;

  display: -moz-box;
  -moz-box-orient: horizontal;

  display: box;
  box-orient: horizontal;
}

.record-list {
    width: 100px;
    background: purple;
    position: relative;
}

.report-content {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    background: green;
}

.list {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    overflow: auto;
}