为什么高度为100％的Flex-box可以在除Firefox之外的所有浏览器中使用? [英] Why Flex-box with heigh:100% works in all browsers except Firefox?
问题描述
经过几次尝试，很难找到为什么当父级(以及and)的高度为100％时，Firefox使用flexbox使用不同的渲染的原因 所有浏览器呈现页面都没有问题(即使是IE11和Edge)，但Firefox不能填满我的父div的所有高度
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>
与所有浏览器一样，期望为Firefox提供相同的渲染.
Expecting the same render for Firefox as all browsers does.
推荐答案
在这里我不理解display:table的想法，但是如果您想使用它，最好从html以创建放置在窗口上方的单个单元格的表:
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:grid或flex的表进行得不太好，浏览器在计算大小，行，列的方式上混在一起.表格布局与网格或弹性布局有很大不同；(
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 ;(
这篇关于为什么高度为100％的Flex-box可以在除Firefox之外的所有浏览器中使用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
