Skip to content Skip to sidebar Skip to footer

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?"