Reputation: 122042
I mostly get flexbox but I seem to be missing a concept. What I want is something like this
Basically I don't want the page to overflow vertically and all those red blocks to stack vertically and wrap horizontally - overflowing and scrolling the screen horizontally if needed but never vertically.
The problem is that I don't know how to set the height of the red section's container to be "the rest of the height available on the screen". height: 100%
doesn't work, even with flexbox it seems to be tied to screen width. I can of course hard-set it to a pixel number but that is wrong since different screens can be different sizes.
This is the jsbin template for what I'm doing. I can set body: 100vh
but then the body's contents overflow stretching downward, and I don't know how to set the main height as I specified above.
Upvotes: 1
Views: 2036
Reputation: 1442
The <body>
and <html>
tags by default are only as tall as their content. So to flex vertically from the top of the viewport to the bottom you need to set them both to have height: 100%
.
Beyond that, you have uncovered an implementation bug with flexbox. The code below works as expected in Safari but is broken in Chrome and Firefox.
UPDATE: As described by Daniel Holbert here: https://bugzilla.mozilla.org/show_bug.cgi?id=1212058 This behavior is actually due to the newly implemented min-height: auto
behavior. The code below has been updated to work correctly in all browsers that support modern flexbox.
* { margin:0; padding:0 }
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
nav {
background-color: blue;
margin: 5px
}
nav.top {
width: 100%;
height: 50px;
display: block;
flex: none;
}
div.main {
display: flex;
flex: 1;
}
nav.side {
width: 70px;
height: 400px;
flex: none;
}
main {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
div.container {
flex: 1;
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: flex-start;
min-height: 0;
}
section {
width: 200px;
height: 250px;
background-color: red;
margin: 5px;
}
aside {
outline: 1px solid darkgreen;
flex: none;
height: 50px;
background: purple;
}
<body>
<nav class="top"></nav>
<div class="main">
<nav class="side"></nav>
<main>
<div class="container">
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</div>
<aside>
<button>Cancel</button>
<button>Save</button>
</aside>
</main>
</div>
</body>
NOTE: To see the column wrapping you’ll want to click “Full page” in the snippet
Upvotes: 1