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 withou
Solution 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-rootstyle="display:table-cell; "><divstyle="display: flex; flex-direction: column; height:100%;"><divstyle="display: flex; flex-flow: row wrap; flex: 1 ;"><divstyle="flex: 1 1 50%; background:yellow;"><div>DIV 1</div></div><divstyle="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; "><div>DIV 2</div></div></div><divstyle="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 ;(
Solution 2:
app-root display: table is changed to display: flex
app-root immediate child add width:100%
<!DOCTYPE html><html><head><title>TEST</title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="TEST" /><styletype="text/css"media="all">
*{
box-sizing: border-box;
}
html, body{
height:100%;
margin:0;
}
</style></head><body><app-rootstyle="display:flex; width:100%; height:100%;"><divstyle="display: flex; flex-direction: column; height:100%;width:100%"><divstyle="display: flex; flex-flow: row wrap; flex: 1 1 100%;"><divstyle="flex: 1 1 50%; background:yellow;"><div>DIV 1</div></div><divstyle="display: flex; flex-direction: column; flex: 1 1 50%; background:orange; "><div>DIV 2</div></div></div><divstyle="display: flex; flex-direction: row; background:gray; padding:1rem;"><div>DIV Footer</div></div></div></app-root></body></html>
Post a Comment for "Why Flex-box With Heigh:100% Works In All Browsers Except Firefox?"