Css Grid layout 1fr exceeds parent height

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65599857/css-grid-layout-1fr-exceeds-parent-height

Answer 1

Add min-height:0 to the parent element.

<style>
.main {
  display: grid;
  grid-template-rows: 1fr auto;
  background-color: red;
  width: 300px;
  height: 120px;
}
.top {
  height: 50px;
  background-color: blue;
}
.bottom {
  display: grid;
  grid-template-columns: minmax(100px, 30%) auto;
  column-gap: 10px;
  margin: 10px;
  min-height:0;
}
.left {
  background-color: green;
  max-height: 100%;
  overflow-y: scroll;
}
.right {
  background-color: yellow;
}
</style>

<div class="main">
  <div class="top">My content</div>
  <div class="bottom">
    <div class="left">Left hkjs ajsgf dh a sk si sk dils k lkao one sp shek siej</div>
    <div class="right">Right</div>
  </div>
</div>