JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/335419

by Lhankor_Mhy

HTML

<div class="container">
<div class="item">領域A</div>
<div class="item">領域B</div>  
</div>

CSS

.container{
  height: 200px;
  display: flex;
  flex-direction: column;
}
.item{
  overflow: hidden;
  flex: 1 1 auto;
  background: gold
}
.item:first-child{
  flex: 0 1 auto;
  resize: vertical;
  overflow: hidden;
  background: pink;
}