JSFiddle - React, Tailwind, and code Playground

by 3gwebtrain

HTML

<div class="parent">
 <main>
  <div class="child1">child1</div>
      <div class="child2">child2</div> 
 </main>
</div>

CSS

*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
}

.parent{
  background:lightgray;
  height:100%;
  display:flex;
  flex-wrap:wrap;
  flex-direction: column;
  border:5px solid black;
}

main{
  flex:1;
  background: lightcoral;
  display:flex;
  padding-top:60px;
}

.child1{
  flex:0 0 30%;
  overflow-y: auto;
  background:lightblue;
}
.child2{
  flex:0 0 70%;
  overflow-y: auto;
  background:lightgreen;
}