防止CSS网格造成溢出

Question

我有一个CSS网格，但我发现网格行并没有全部贴合在页面上--相反，它们造成了溢出。我如何调整网格行的大小，使它们不会溢出页面？我认为 1fr 值应该是这样做的，但在我的代码中似乎没有工作。

我看了一下 防止内容扩展网格项 并尝试了那里的建议答案（如更改了 grid-template-rows: repeat(5, 1fr) 到 grid-template-rows: repeat(5, minmax(0, 1fr)); 但无济于事。

我试着添加 height: 100% 到网格和它的容器，但它仍然是溢出的。

JsFiddle https:/jsfiddle.net4g9b2qkL

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

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  height: 100%;
}

#right {
  grid-column: 2 / 3;
  height: 100%;
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
}

img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
  <div id="left">
    <p>
      Some stuff on the left....
    </p>
  </div>
  <div id="right">
    <h1>
      Title
    </h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">
        Result 2
      </div>
      <div class="result">
        Result 3
      </div>
    </div>
  </div>
</div>

Answer 1

有几件事需要考虑。

缺少高度参考

使用一个百分比值来设置高度。img 是有问题的，因为容器上没有定义高度。一般来说，百分比高度应该在父体上有一个高度参考，以保证渲染的可靠性。你的声明可能会被忽略，也可能不会被误解。

请看。使用CSS height 财产和百分比值

---

height: 100%

设置 #results 要素 height: 100% 是有问题的，如果你想防止垂直溢出，因为它没有考虑到兄弟姐妹的高度（the h1).

height: 100% + height of h1 title > height of container (resulting in an overflow)

---

用一个灵活的高度代替

不使用百分比高度，而是设置一个更灵活的高度，如 flex-grow. 这将告诉容器只消耗剩余空间。

---

覆盖最小高度的默认值

网格和弹性项目默认设置为停止缩小其内容的大小。使用 min-height: 0.

请看。为什么flex项目不能收缩过内容大小？

---

跨浏览器兼容性

Chrome可以用更少的代码（比下面贴的更少）来做布局。它对作者的意图做了更多假设。Firefox、Edge和Safari的假设较少，所以需要更多的规则。

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100vh;
}

#left {
  background: lightblue;
}

#right {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#results {
  flex-grow: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.result {
  min-height: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

body {
  margin: 0;
}

<div id="container">
  <div id="left">
    <p>Some stuff on the left....</p>
  </div>
  <div id="right">
    <h1>Title</h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">Result 2</div>
      <div class="result">Result 3</div>
    </div>
  </div>
</div>

Answer 2

你需要考虑 min-height:0 异地 并做一些调整，如下面。

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

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  /*height: 100%; removed */
}

#right {
  grid-column: 2 / 3;
  /*height: 100%; removed */
  min-height:0; /* here */
  /* added */
  display:flex;
  flex-direction:column;
  /**/
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  /*height: 100%; removed */
  flex-grow:1; /* added */
  min-height:0 /* here */
}
.result {
  min-height:0 /* here */
}

img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
  <div id="left">
    <p>
      Some stuff on the left....
    </p>
  </div>
  <div id="right">
    <h1>
      Title
    </h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">
        Result 2
      </div>
      <div class="result">
        Result 3
      </div>
    </div>
  </div>
</div>