Menu
I'm trying to create a flexbox that contains a header and a 2x2 CSS grid.
.container) fills the entire viewport.Here's what I have now:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
* { box-sizing: border-box; }
.container {
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
}
.header {
background: lime;
}
.grid {
flex: auto; /* fills the remaining part of the viewport below header */
background: cyan;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 2px;
}
.cell {
padding: 10px;
background: linear-gradient(to bottom right, orange, white);
}<div class="container">
<div class="header">Variable Height<br />Header</div>
<div class="grid">
<div class="cell a">Cell A</div>
<div class="cell b">Cell B</div>
<div class="cell c">Cell C</div>
<div class="cell d">Cell D</div>
</div>
</div>This works as I expect on Firefox, but not on Chrome. Here's the desired behavior:
And here's the undesired behavior on Chrome:
The confusing part is that my div.grid (cyan) has a desired height (100vh minus the header height), so the flexbox itself is working correctly. And when I remove the flexbox and the header, the grid itself works as expected outside flexbox, too.
html,
body {
height: 100%;
padding: 0;
margin: 0;
font-family: sans-serif;
}
* { box-sizing: border-box; }
.container {
height: 100%;
background-color: pink;
border: 2px solid red;
}
.grid {
height: 100%;
background: cyan;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
}
.cell {
padding: 10px;
background: linear-gradient(to bottom right, orange, white);
}<div class="container">
<div class="grid">
<div class="cell a">Cell A</div>
<div class="cell b">Cell B</div>
<div class="cell c">Cell C</div>
<div class="cell d">Cell D</div>
</div>
</div>So it appears to me that the problem happens only by the combination of Chrome, flexbox and css grid. What am I missing, and how can I fix this? (Please note that including the header in the grid is not an option now.)
539
Of course CSS grid and flexbox can work together in a layout. You can use flexbox inside CSS grid and vice versa. For instance, you could use flexbox to center an element like a button both vertically and horizontally within a particular grid cell (since centering with other CSS methods is … tricky).
Flexbox is very well supported across modern browsers, however there are a few issues that you might run into.
Most developers are afraid to start using CSS Grid because of browser support, but CSS grid is fully supported in all main browsers: Chrome, Firefox, Safari, Edge including their mobile versions.
Instead of flex: auto on grid, use flex: 1 on it so that the grid, and you have the desired behavior in both Firefox and Chrome. See demo below:
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
* { box-sizing: border-box; }
.container {
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
}
.header {
background: lime;
}
.grid {
flex: 1; /* fills the remaining part of the viewport below header */
background: cyan;
display: grid;
grid-template: 1fr 1fr / 1fr 1fr;
grid-gap: 2px;
}
.cell {
padding: 10px;
background: linear-gradient(to bottom right, orange, white);
}<div class="container">
<div class="header">Variable Height<br />Header</div>
<div class="grid">
<div class="cell a">Cell A</div>
<div class="cell b">Cell B</div>
<div class="cell c">Cell C</div>
<div class="cell d">Cell D</div>
</div>
</div>
<style>
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
* { box-sizing: border-box; }
.container {
height: 100%;
display: flex;
flex-direction: column;
border: 2px solid red;
}
.header {
background: lime;
}
.grid {
flex: 1; /* fills the remaining part of the viewport below header */
background: cyan;
display: grid;
grid-template-columns:1fr 1fr;
grid-gap: 2px;
}
.cell {
padding: 10px;
background: linear-gradient(to bottom right, orange, white);
}
</style>
</head>
</body><html>
</head>
<!-- begin snippet: js hide: false console: true babel: null -->If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
