防止CSS网格导致溢出

Question

我有一个 CSS 网格，但我发现网格行并不都适合页面 - 相反，它们会导致溢出。如何调整网格行的大小，以免它们溢出页面？我认为该1fr值应该这样做，但它似乎在我的代码中不起作用。

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

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

JsFiddle https://jsfiddle.net/4g9b2qkL/

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是有问题的，因为容器上没有定义的高度。一般来说，百分比高度应该在父级上有一个高度参考，以实现可靠的渲染。您的声明可能会也可能不会被忽略/误解。

请参阅：使用 CSSheight属性和百分比值

height: 100%

如果您想防止垂直溢出，则将元素设置#results为height: 100%是有问题的，因为它不考虑同级元素（ ）的高度h1。

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

使用灵活的高度代替

不要使用百分比高度，而是设置更灵活的高度，例如flex-grow。这告诉容器简单地消耗剩余空间。

覆盖默认的最小高度

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

请参阅：为什么弹性项目不会缩小超过内容大小？

跨浏览器兼容性

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

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

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