Flexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作
Posted
技术标签:
【中文标题】Flexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作【英文标题】：CSS Grid inside Flexbox not working as expected only on Chrome 【发布时间】：2019-03-09 19:06:31 【问题描述】：我正在尝试创建一个包含标题和 2x2 CSS 网格的 flexbox。
flexbox (.container) 填充整个视口。
标题的高度是可变的。它可能会在页面打开时动态变化。
网格中的四个单元格必须占据视口的剩余部分，并且它们的宽度和高度必须相等。
这是我现在拥有的：
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>这在 Firefox 上可以正常工作，但在 Chrome 上却不行。这是所需的行为：
这是 Chrome 上的不良行为：
令人困惑的部分是我的div.grid（青色）具有所需的高度（100vh 减去标题高度），因此 flexbox 本身可以正常工作。当我删除 flexbox 和 header 时，网格本身也在 flexbox 之外按预期工作。
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>所以在我看来，问题只发生在 Chrome、flexbox 和 css 网格的组合中。我错过了什么，我该如何解决这个问题？ （请注意，现在不能在网格中包含标题。）
【问题讨论】：
这似乎是一个已知的 Chrome 错误：bugs.chromium.org/p/chromium/issues/detail?id=784059。 @kukkuz 的建议是已知的解决方法。 【参考方案1】：在grid 上使用flex: 1 而不是flex: auto，以便网格，并且您在Firefox 和Chrome 中都具有所需的行为。请参阅下面的演示：
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>【讨论】：
这种解决方法在 chrome 83 中不再适用，边缘很好，我很生气。 你必须添加“height: 100vh; min-height: 0;”到“.grid”【参考方案2】：<style>
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-columns:1fr 1fr;
grid-gap: 2px;
.cell
padding: 10px;
background: linear-gradient(to bottom right, orange, white);
</style>
</head>
</body><html>
</head>
<!-- begin snippet: js hide: false console: true babel: null -->【讨论】：
你能在代码sn-p之外给出一些解释吗？以上是关于Flexbox 中的 CSS Grid 仅在 Chrome 上无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 4 div（使用 btn 类）中的文本垂直对齐，使用 CSS Grid（并且没有 flexbox）时没有固定高度
html 使用CSS Grid和Flexbox的LastPass Vault布局