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

问题

After several attempts, is very tricky to find why Firefox has a different render with flexbox when the parent (and also and ) has height:100% All browsers render the page without any problem (even IE11 and Edge), but Firefox can't fill all height of my 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>

Expecting the same render for Firefox as all browsers does.

回答1:

I do not understand the idea of display:table here, but if you want to use it , best is to do it from html in order to create a table of a single cell layed over the window:

* {
  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 with grid or flex do not go along too well , browsers gets mixed up in the way it should calculate size , rows, columns. the table-layout and grid or flex layout are very much different ;(

回答2:

app-root display: table is changed to display: flex app-root immediate child add 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>

来源：https://stackoverflow.com/questions/57181611/why-flex-box-with-heigh100-works-in-all-browsers-except-firefox

标签

html

css

firefox

flexbox

height