Css Grid布局1fr超过父高度[重复]答案

【问题标题】：Css Grid layout 1fr exceeds parent height [duplicate]Css Grid布局1fr超过父高度[重复]
【发布时间】：2021-01-06 16:48:08
【问题描述】：

我做了一个演示来演示我的问题

<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>

绿色 div 超过其父 div 的高度。我希望绿色 div 位于红色 div 内，并且只要内容超过父级的高度，就会有一个滚动条。

我不知道我对问题的解释有多清楚，但请帮助我。

【问题讨论】：

标签： css css-grid grid-layout

【解决方案1】：

将min-height:0 添加到父元素。

<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>

【讨论】：