JSFiddle - React, Tailwind, and code Playground

by Belzyvard89

HTML

<div class="myroot">
  <div class="mynav">nav</div>
  <div class="mymain">
    <div class="mymainwrapper">
      <div class="mymaintopbar">top main bar</div>
      <div class="myitemscontainer">
        <div class="myitem"> hello 1</div>
        <div class="myitem"> hello 2</div>
        <div class="myitem"> hello 3</div>
        <div class="myitem"> hello 4</div>
        <div class="myitem"> hello 5</div>
        <div class="myitem"> hello 6</div>
        <div class="myitem"> hello 7</div>
      </div>
    </div>
  </div>
  <div class="myfoot">Footer</div>
</div>

CSS

.myroot {
  height: 300px;
  display: flex;
  flex-flow: column;
}

.mynav {
  flex: 0 0 10%;
  background-color: gray;
}

.myfoot {
  flex: 0 0 10%;
  background-color: rgb(100, 100, 100);
}

.mymain {
  flex: 0 0 80%;
  background-color: silver;
}

.mymainwrapper {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.mymaintopbar{
  flex: 0 0 20%;
  background-color: yellow;
}

.myitemscontainer{
  overflow-y: scroll;
  flex: 0 0 80%;
  background-color: orange;
}

.myitem{
  height: 50px;
  border-bottom: solid;
}