时间戳

首页 > 解决方案 > 防止 CSS 网格子扩展父级

css - 防止 CSS 网格子扩展父级

问题描述

我有以下CSS

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
}

.five {
  background: orange;
  height: 800px;
  overflow-y: auto;
}

.four {
  background: green;
}

.size {
  background: blue;
}
<div class="one">
  <div class="two">
  </div>
  <div class="three">
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
  </div>
</div>

现在，正如您从https://codepen.io/dubcanada/pen/ZEbYBex看到的那样，如果五个比三个高 - 122 像素（64 + 58 像素），它会扩展三个以适应的高度。我希望它添加一个滚动条而不是扩大高度。

我已经尝试了min-height: 0;, max-height: 0; min-width: 0; max-width: 0;技巧，我能想到的一切我不知道如何解决这个问题。

有任何想法吗？

标签： csscss-grid

解决方案

不知道你想达到什么...

这是我最好的猜测：

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
  grid-template-rows: minmax(0, 1fr);
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
  max-height: 100%;
}

.five {
  background: orange;
  height: 500px;
  overflow-y: auto;
  max-height: 100%;
}

.four {
  background: green;
}

.size {
  background: blue;
}
<div class="one">
  <div class="two">2
  </div>
  <div class="three">
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
  </div>
</div>

推荐阅读