Menu
I'm trying to have elements fill up the cross axis in flexbox. In the example below I have a fixed-height item taking up a whole row, and two items taking up the next.
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-flow: row wrap;
margin: 0;
align-items: stretch;
align-content: flex-start;
}
div {
border: 3px solid red;
flex-grow: 1;
}
div#a {
flex-basis: 100%;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="a" style="background-color:green">AAA</div>
<div id="b" style="background-color:blue">BBB</div>
<div id="c" style="background-color:yellow">CCC</div>
</body>
</html>If you change the align-content on body to stretch you can see the effects of the body min-height - the second row will stick to the bottom. However, there is now a gap between the rows.
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-flow: row wrap;
margin: 0;
align-items: stretch;
align-content: stretch;
}
div {
border: 3px solid red;
flex-grow: 1;
}
div#a {
flex-basis: 100%;
height: 100px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="a" style="background-color:green">AAA</div>
<div id="b" style="background-color:blue">BBB</div>
<div id="c" style="background-color:yellow">CCC</div>
</body>
</html>I want to remove this gap so that blocks B and C take up all remaining space.
680
Basically, using the current structure, flexbox doesn't have an option for that...and it's not really logical that it should.
One the other hand, if the height of the first pseudo-row is known you could use calc to set the height of the second pseudo-row by setting the height of the second div....but it's not really a "flexbox solution".
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: row wrap;
margin: 0;
}
div {
border: 3px solid red;
flex-grow: 1;
}
div#a {
flex-basis: 100%;
height: 100px;
}
div#b {
height: calc(100% - 100px);
}<body>
<div id="a" style="background-color:green">AAA</div>
<div id="b" style="background-color:blue">BBB</div>
<div id="c" style="background-color:yellow">CCC</div>
</body>Try this
html {
min-height: 100vh;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
#a {
flex: 0 1 100px;
}
.group {
display: flex;
flex: 1;
flex-direction: row;
}
.group div {
flex: 1;
}<div id="a" style="background-color:green">AAA</div>
<div class="group">
<div id="b" style="background-color:blue">BBB</div>
<div id="c" style="background-color:yellow">CCC</div>
</div>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
