JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<body class="parent">
  <div>
  <div class="child1">
    Child1
  </div>
  
  </div>
  <div>
  <div class="child2">
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
    Child2<br>
  </div>
  
  </div>
</body>

CSS

.parent{
  display: flex;
  flex-direction: column;
  height: 100vh;
  border: 0;
  margin: 0;
  padding: 0;
}
.child1{
  flex: 0 0 auto;
  background-color: green;
}
.child2{
  flex: 1 1 auto;
  background-color: yellow;
}