Flex 高度在 Chrome 中不起作用 [重复]
Posted
技术标签:
【中文标题】Flex 高度在 Chrome 中不起作用 [重复]【英文标题】：Flex height not working in Chrome [duplicate] 【发布时间】：2016-05-28 06:12:10 【问题描述】：为了更好地查看问题在 Firefox 和 chrome 上运行在 html 代码下方并查看差异。
该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将显示设置为flex 和flex-direction 设置为column，并将其中一个弹性项目flex-grow 设置为1。此弹性项目的内容不能将高度设置为100%。
你能在不使用 javascript 或 css Calc 函数的情况下帮助我解决问题吗？ 因为在实际项目中，事情比这复杂得多。
h1
margin: 0;
padding: 0;
color: white;
div
font-size: 38px;
color: white;
<body style="margin: 0; padding: 0;">
<div style="height: 100vh; background: royalblue;">
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="background: rosybrown; flex-grow: 0;">
This is first flex item
</div>
<div style="flex-grow: 1; background-color: red;">
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space. and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div). this works on all other browsers.
</div>
</div>
</div>
</div>
</body>【问题讨论】：
这个答案可能会对您有所帮助（请参阅要点 #3）：***.com/a/35051529/3597276 我展示的问题与 flex 布局本身无关。因为 flex 容器和它的 flex 项工作正常，但问题在于 flex-grow 设置为 1 的 flex 项的内容。 我刚刚再次阅读了您的问题，查看了您的代码，并阅读了您演示中的文字。这个问题似乎正是我上面的回答所暗示的。将height: 100%添加到橙色div的父级，它就可以工作了。
是的，我知道你在说什么我测试了这个解决方案。但正如我所说，如果有办法不使用 calc 或 javaScript。因为带有 flex-grow:0 的弹性项目；在实际项目中不是固定高度。
没有calc 或javascript。只是一个纯 CSS height 声明，Chrome 需要它来识别孩子的百分比高度。
【参考方案1】：
将height: 100%添加到橙色div的父级：
<div style="flex-grow: 1; background-color: red; height: 100%;"><!-- ADJUSTMENT HERE -->
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space.
and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div).
this works on all other browsers.
</div>
</div>
基本上，Chrome 和 Safari 会根据父级的 height 属性的值来解析百分比高度。 Firefox 和 IE11/Edge 使用父级计算的弹性高度。有关更多详细信息，请参阅此答案中的第 3 点：https://***.com/a/35051529/3597276
【讨论】：
非常感谢您抽出宝贵的时间。如果可以滚动，则接受此解决方案。在我的情况下，它不允许滚动。我使用高度 100% 它会将其设置为其父高度的 100% 总高度将为 100% 父级 + 固定高度行，这种情况下，如果您在编辑时运行我的代码，它将滚动。 我明白了。不幸的是，并非所有浏览器都将 flex height 视为具有百分比高度的孩子的参考。以上是关于Flex 高度在 Chrome 中不起作用 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
堆叠的 flexbox 垂直居中在 chrome 中不起作用
flex-basis 不起作用，图像在 Safari 中消失 [重复]