为什么高度为 100% 的 Flex-box 适用于除 Firefox 之外的所有浏览器？答案

【问题标题】：Why Flex-box with heigh:100% works in all browsers except Firefox?为什么高度为 100% 的 Flex-box 适用于除 Firefox 之外的所有浏览器？
【发布时间】：2019-12-02 12:43:44
【问题描述】：

经过几次尝试，当父级（以及和）具有高度：100% 时，很难找到为什么 Firefox 与 flexbox 具有不同的渲染所有浏览器都毫无问题地呈现页面（即使是 IE11 和 Edge），但 Firefox 无法填充我父 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 的渲染与所有浏览器一样。

【问题讨论】：

因为app-root 有display: table … 改为block，问题就消失了。（所以我想说，这并不是一个真正的 flexbox 问题。）
可能重复stackoverflow.com/questions/20956295/…
@ThisisFish 我尝试使用 display:flex 更改示例代码（在 jsfiddle）并将高度 50px 删除为 100%。同样的问题，只有在 Firefox 中有这种奇怪的行为。

标签： html css firefox flexbox height

【解决方案1】：

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>

【讨论】：

感谢您的回复，问题是... display:table 必须位于因为将适用于没有 flexbox 的其他页面（我在 Angular 其他组件和页面下重用）和 IE10需要 11 个。

【解决方案2】：

我不明白这里display:table 的想法，但是如果你想使用它，最好是从 html 中进行操作，以便创建一个覆盖单个单元格的表格窗口：

* {
  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 配合得不太好，浏览器在计算大小、行、列的方式上搞混了。表格布局和网格或弹性布局有很大不同；(

【讨论】：

感谢@G-Cyr 的快速回答，有一个 display: table 因为我在几个页面中使用这个模板，具有不同的组件（在 Angular 下）和跨浏览器兼容性是必须的（也是 IE10 - 11）
我确认该解决方案没有任何问题！ :)