Flex 高度在 Chrome 中不起作用

Question

Flex 高度在 Chrome 中不起作用

为了更好地查看问题，请在 Firefox 和 chrome 上的 html 代码下运行并查看差异。

该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将 display 设置为flex和flex-directionto column，并将其中一个 flex 项设置flex-grow为 1 时。此 flex 项的内容不能将高度设置为 100%。

你能帮我在不使用 JavaScript 或 css Calc 函数的情况下解决问题吗？因为在实际项目中，事情远比这复杂得多。

h1 {
  margin: 0;
  padding: 0;
  color: white;
}

div {
  font-size: 38px;
  color: white;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mic*_*l_B 6

添加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>

Run Code Online (Sandbox Code Playgroud)

本质上，Chrome 和 Safari 会根据父height属性的值来解析百分比高度。Firefox 和 IE11/Edge 使用父计算的 flex 高度。有关更多详细信息，请参阅此答案中的第 3 点：https : //stackoverflow.com/a/35051529/3597276

归档时间：	9 年，9 月前
查看次数：	11618 次
最近记录：	8 年，7 月前