Flex 高度在 Chrome 中不起作用 [重复]答案

【问题标题】：Flex height not working in Chrome [duplicate]Flex 高度在 Chrome 中不起作用 [重复]
【发布时间】：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）：stackoverflow.com/a/35051529/3597276
我展示的问题与 flex 布局本身无关。因为 flex 容器和它的 flex 项工作正常，但问题在于 flex-grow 设置为 1 的 flex 项的内容。
我刚刚再次阅读了您的问题，查看了您的代码，并阅读了您演示中的文字。这个问题似乎正是我上面的回答所暗示的。将height: 100%添加到橙色div的父级，它就可以工作了。
是的，我知道你在说什么我测试了这个解决方案。但正如我所说，如果有办法不使用 calc 或 javaScript。因为带有 flex-grow:0 的弹性项目；在实际项目中不是固定高度。
没有calc 或javascript。只是一个纯 CSS height 声明，Chrome 需要它来识别孩子的百分比高度。

标签： css google-chrome flexbox

【解决方案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://stackoverflow.com/a/35051529/3597276

【讨论】：

非常感谢您抽出宝贵的时间。如果可以滚动，则接受此解决方案。在我的情况下，它不允许滚动。我使用高度 100% 它会将其设置为其父高度的 100% 总高度将为 100% 父级 + 固定高度行，这种情况下，如果您在编辑时运行我的代码，它将滚动。
我明白了。不幸的是，并非所有浏览器都将 flex height 视为具有百分比高度的孩子的参考。