Single-row 高度为 1fr 的网格未填充 Chrome 中的高度
Single-row grid with height 1fr not filling height in Chrome
我在 Flexbox 列中有一个 CSS 网格,网格有 flex-grow: 1
.
在 Chrome 中,网格会扩展以填充可用的 space,但其内容不会,即使网格上有 align-content: stretch
。在 Firefox 和 Edge 中,内容会根据需要扩展以填充网格的高度。
Here's a pen that reproduces the problem,以及它在不同浏览器中的外观图片。这是 Chrome 的错误吗?如果是,有人可以提出一个简单的解决方法吗?
Chrome
Firefox
边缘
#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>
Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?
它看起来像是 Chrome 中的错误。但我不能肯定。
这是正在发生的事情:
- 您将弹性项目网格容器设置为占用所有可用高度
flex-grow: 1
- 因为您只定义了
flex-grow
属性,其他两个 flexibility properties – flex-shrink
和 flex-basis
– 保持默认值。
flex-shrink
的默认值为 1
,与此问题无关。
flex-basis
的默认值为 auto
、,这是问题的根源。
- 如果您将
flex-basis: 0
添加到您的代码中,该项目也会在 Chrome 中占据全高。
#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>
我在 Flexbox 列中有一个 CSS 网格,网格有 flex-grow: 1
.
在 Chrome 中,网格会扩展以填充可用的 space,但其内容不会,即使网格上有 align-content: stretch
。在 Firefox 和 Edge 中,内容会根据需要扩展以填充网格的高度。
Here's a pen that reproduces the problem,以及它在不同浏览器中的外观图片。这是 Chrome 的错误吗?如果是,有人可以提出一个简单的解决方法吗?
Chrome
Firefox
边缘
#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>
Is this a bug with Chrome, and if so, can anyone suggest a straightforward workaround?
它看起来像是 Chrome 中的错误。但我不能肯定。
这是正在发生的事情:
- 您将弹性项目网格容器设置为占用所有可用高度
flex-grow: 1
- 因为您只定义了
flex-grow
属性,其他两个 flexibility properties –flex-shrink
和flex-basis
– 保持默认值。 flex-shrink
的默认值为1
,与此问题无关。flex-basis
的默认值为auto
、,这是问题的根源。- 如果您将
flex-basis: 0
添加到您的代码中,该项目也会在 Chrome 中占据全高。
#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>