Flexbox 中的 CSS 网格仅在 Chrome 上无法按预期工作 [英] CSS Grid inside Flexbox not working as expected only on Chrome

问题描述

我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox.

• Flexbox (.container) 填充了整个视口.
• 标题的高度是可变的.它可能会在页面打开时动态更改.
• 网格中的四个单元格必须占据视口的剩余部分，并且它们的宽度和高度必须相等.

这是我现在所拥有的:

html,身体 {高度:100%；填充:0；边距:0；}* { box-sizing: border-box;}.容器 {高度:100%；显示:弹性；弹性方向:列；边框:2px纯红色；}.header {背景:石灰；}.网格 {弹性:自动；/* 填充标题下方视口的剩余部分 */背景:青色；显示:网格；网格模板:1fr 1fr/1fr 1fr；网格间隙:2px；}.细胞 {填充:10px；背景:线性渐变(到右下角，橙色，白色)；}

<div class="header">可变高度<br/>Header</div><div class="grid"><div class="单元格 a">单元格 A</div><div class="cell b">Cell B</div><div class="cell c">Cell C</div><div class="cell d">Cell D</div>

这在 Firefox 上可以正常工作，但在 Chrome 上则不行.这是所需的行为:

这是 Chrome 上不受欢迎的行为:

令人困惑的部分是我的 div.grid(青色)具有所需的高度(100vh 减去标题高度)，因此 flexbox 本身工作正常.当我移除 flexbox 和 header 时，网格本身在 flexbox 之外也可以正常工作.

html,身体 {高度:100%；填充:0；边距:0；字体系列:无衬线；}* { box-sizing: border-box;}.容器 {高度:100%；背景颜色:粉红色；边框:2px纯红色；}.网格 {高度:100%；背景:青色；显示:网格；网格模板:1fr 1fr/1fr 1fr；}.细胞 {填充:10px；背景:线性渐变(到右下角，橙色，白色)；}

<div class="grid"><div class="单元格 a">单元格 A</div><div class="cell b">Cell B</div><div class="cell c">Cell C</div><div class="cell d">Cell D</div>

所以在我看来，这个问题只发生在 Chrome、flexbox 和 css grid 的组合中.我错过了什么，我该如何解决这个问题?(请注意，现在不能在网格中包含标题.)

解决方案

在 grid 上使用 flex: 1 代替 flex: auto在它上面这样网格，并且您在 Firefox 和 Chrome 中都有所需的行为.请参阅下面的演示:

html,身体 {高度:100%；填充:0；边距:0；}* { box-sizing: border-box;}.容器 {高度:100%；显示:弹性；弹性方向:列；边框:2px纯红色；}.header {背景:石灰；}.网格 {弹性:1；/* 填充标题下方视口的剩余部分 */背景:青色；显示:网格；网格模板:1fr 1fr/1fr 1fr；网格间隙:2px；}.细胞 {填充:10px；背景:线性渐变(到右下角，橙色，白色)；}

<div class="header">可变高度<br/>Header</div><div class="grid"><div class="单元格 a">单元格 A</div><div class="cell b">Cell B</div><div class="cell c">Cell C</div><div class="cell d">Cell D</div>

I'm trying to create a flexbox that contains a header and a 2x2 CSS grid.

• The flexbox (.container) fills the entire viewport.
• The height of the header is variable. It may change dynamically while the page is open.
• The four cells in the grid must occupy the remaining part of the viewport and they must have the equal width and height.

Here's what I have now:

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

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: auto; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="header">Variable Height<br />Header</div>
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

This works as I expect on Firefox, but not on Chrome. Here's the desired behavior:

And here's the undesired behavior on Chrome:

The confusing part is that my div.grid (cyan) has a desired height (100vh minus the header height), so the flexbox itself is working correctly. And when I remove the flexbox and the header, the grid itself works as expected outside flexbox, too.

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

* { box-sizing: border-box; }

.container {
  height: 100%;
  background-color: pink;
  border: 2px solid red;
}

.grid {
  height: 100%;
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

So it appears to me that the problem happens only by the combination of Chrome, flexbox and css grid. What am I missing, and how can I fix this? (Please note that including the header in the grid is not an option now.)

解决方案

Instead of flex: auto on grid, use flex: 1 on it so that the grid, and you have the desired behavior in both Firefox and Chrome. See demo below:

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

* { box-sizing: border-box; }

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 2px solid red;
}

.header {
  background: lime;
}

.grid {
  flex: 1; /* fills the remaining part of the viewport below header */
  background: cyan;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  grid-gap: 2px;
}

.cell {
  padding: 10px;
  background: linear-gradient(to bottom right, orange, white);
}

<div class="container">
  <div class="header">Variable Height<br />Header</div>
  <div class="grid">
    <div class="cell a">Cell A</div>
    <div class="cell b">Cell B</div>
    <div class="cell c">Cell C</div>
    <div class="cell d">Cell D</div>
  </div>
</div>

这篇关于Flexbox 中的 CSS 网格仅在 Chrome 上无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！