Question

为了更好地在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>

Answer 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

Flex高度在Chrome

1 个答案: