Css Grid layout 1fr exceeds parent height

Question

I have made a demo to demonstrate my problem

<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;
}
.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>

The green div exceeds the height of its parent div. I want the green div to be within the red div and have a scroll bar whenever the content exceeds the height of the parent.

I don't know how clear I have explained my problem but please help me.

score 3 · Answer 1 · answered Jan 06 '21 at 17:17

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>

Css Grid layout 1fr exceeds parent height

1 Answers1