为什么 Flex-box 和 heigh:100% 在除 Firefox 之外的所有浏览器中都有效？

Question

经过多次尝试，很难找到为什么当 parent（以及 and ）具有 height:100% 时 Firefox 具有不同的 flexbox 渲染所有浏览器都可以毫无问题地呈现页面（甚至 IE11 和 Edge），但 Firefox 无法填满我的 parent div

的所有高度

<!DOCTYPE html>
<html><head>
<title>TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="TEST" />

<style type="text/css" media="all">
*{
 box-sizing: border-box;
}
html, body{
 height:100%;
 margin:0;
}
</style>

</head>
<body>

<app-root style="display:table; width:100%; height:100%;">
 <div style="display: flex; flex-direction: column; height:100%;">

  <div style="display: flex; flex-flow: row wrap; flex: 1 1 100%;">
    <div style="flex: 1 1 50%; background:yellow;">
    <div>DIV 1</div>
    </div>
    
    <div style="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; ">
    <div>DIV 2</div>
    </div>
  </div>
   
  <div style="display: flex; flex-direction: row; background:gray; padding:1rem;">
   <div>DIV Footer</div>
  </div>
   
 </div>
</app-root>

</body>
</html>

期待 Firefox 的渲染与所有浏览器相同。

Answer 1

我不明白display:table这里的想法，但是如果你想使用它，最好是从html顺序开始在 window:

上创建单个单元格的 table

* {
  box-sizing: border-box;
}

html,
body{
  width: 100%;
  height: 100%;
  display: table;
}

body {
  display: table-row;
}

<app-root style="display:table-cell; ">
  <div style="display: flex; flex-direction: column; height:100%;">

    <div style="display: flex; flex-flow: row wrap; flex: 1 ;">
      <div style="flex: 1 1 50%; background:yellow;">
        <div>DIV 1</div>
      </div>

      <div style="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; ">
        <div>DIV 2</div>
      </div>
    </div>

    <div style="display: flex; flex-direction: row; background:gray; padding:1rem;">
      <div>DIV Footer</div>
    </div>

  </div>
</app-root>

display:table 与 grid 或 flex 的搭配不太好，浏览器在计算大小、行、列的方式上会混淆。 table-layout 和 grid 或 flex 布局非常不同；(

Answer 2

app-root display: table 更改为 display: flex app-root 直接子节点添加 width:100%

<!DOCTYPE html>
<html><head>
<title>TEST</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="TEST" />

<style type="text/css" media="all">
*{
 box-sizing: border-box;
}
html, body{
 height:100%;
 margin:0;
}
</style>

</head>
<body>

<app-root style="display:flex; width:100%; height:100%;">
 <div style="display: flex; flex-direction: column; height:100%;width:100%">

  <div style="display: flex; flex-flow: row wrap; flex: 1 1 100%;">
    <div style="flex: 1 1 50%; background:yellow;">
    <div>DIV 1</div>
    </div>
    
    <div style="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; ">
    <div>DIV 2</div>
    </div>
  </div>
   
  <div style="display: flex; flex-direction: row; background:gray; padding:1rem;">
   <div>DIV Footer</div>
  </div>
   
 </div>
</app-root>

</body>
</html>

为什么 Flex-box 和 heigh:100% 在除 Firefox 之外的所有浏览器中都有效？

Why Flex-box with heigh:100% works in all browsers except Firefox?

html

css

firefox

height

flexbox