时间戳

首页 > 解决方案 > Css Grid 布局 1fr 超过父高度

css - Css Grid 布局 1fr 超过父高度

问题描述

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

<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 内，并且只要内容超过父级的高度，就会有一个滚动条。

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

标签： csscss-gridgrid-layout

解决方案

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

推荐阅读