单排网格,高度为1fr,未在Chrome中填充高度

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了单排网格,高度为1fr,未在Chrome中填充高度相关的知识,希望对你有一定的参考价值。

我在Flexbox列中有一个CSS Grid,网格有flex-grow: 1

在Chrome中,网格会扩展以填充可用空间,但其内容不会,即使网格上有align-content: stretch。在Firefox和Edge中,内容会根据需要扩展以填充网格的高度。

Here's a pen that reproduces the problem,以及它在不同浏览器中的外观图像。这是Chrome的错误,如果是这样,有人可以建议一个简单的解决方法吗?

Pen in chrome, showing the bug

火狐

Pen in firefox, showing desired behaviour

边缘

Pen in edge, showing desired behaviour

#wrapper {
  display: flex;
  flex-direction: column;
  height: 15rem;
  background-color: #aaa;
}

#grid {
  flex-grow: 1;
  display: grid;
  background-color: #ccf;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  align-content: stretch; /* "end" correctly puts the row to the bottom */
}

#left {
  background-color: #fcc;
}

#right {
  background-color: #cfc;
}
<div id="wrapper">
  <div id="top">not in grid</div>

  <div id="grid">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>
答案

这是Chrome的错误,如果是这样,有人可以建议一个简单的解决方法吗?

它看起来像Chrome中的一个错误。但我不能肯定地说。

这是发生了什么:

  • 您已将弹性项目网格容器设置为使用flex-grow: 1消耗所有可用高度
  • 因为你只定义了flex-grow属性,所以另外两个flexibility properties - flex-shrinkflex-basis - 保持默认值。
  • flex-shrink的默认值是1,与此问题无关。
  • flex-basis的默认值是auto,是问题的根源。
  • 如果您将flex-basis: 0添加到代码中,该项目也会在Chrome中占据全部高度。

revised codepen

#wrapper {
  display: flex;
  flex-direction: column;
  height: 15rem;
  background-color: #aaa;
}

#grid {
  /* flex-grow: 1; */
  flex: 1; /* fg:1, fs:1, fb:0 */
  display: grid;
  background-color: #ccf;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

#left  { background-color: #fcc; }
#right { background-color: #cfc; }
<div id="wrapper">
  <div id="top">not in grid</div>
  <div id="grid">
    <div id="left">left</div>
    <div id="right">right</div>
  </div>
</div>

以上是关于单排网格,高度为1fr,未在Chrome中填充高度的主要内容,如果未能解决你的问题,请参考以下文章

为没有滚动条的 100% 高度网格设置边距或填充 [重复]

Firefox 和 Opera/Chrome/IE 中的表单填充差异

使用浏览器窗口的100%高度/宽度的多个列的HTML网格布局

如何使窗口高度适应内容?

IE11中的CSS等宽和高度网格框

Flexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作