JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flex">
    <div id="grid">
      <div id="item1"></div>
      <div id="item2"></div>
    </div>
  </div>

CSS

#flex {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow: hidden;
}
#grid {
  flex: 1 1 0;
  display: grid;
  grid-template-rows: minmax(0, 100px) 100px;
}
#item1 {
  height: 100px;
  width: 100px;
  background: green;
}
#item2 {
  background: red;
}