Flexbox with flex:1 child and grandchild with 100%
Question
Imagine having this situation: a simple 3 rows layout made with flexbox, with the central row filling all the space available. Pretty standard stuff.
<body>
<div class="container">
<div class="flex-container">
<div>header</div>
<div class="content">
<div class="item red">asdasd</div>
<div class="item yellow">asdasd</div>
<div class="item green">asdasd</div>
</div>
<div>footer</div>
</div>
<div>
<body>
Here the CSS:
html,
body,
.container {
height: 100%;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.flex-container .content {
flex: 1;
}
.flex-container .content .item {
height: 100%;
}
(omitting css for background colors, you can guess it).
The problem is that the "content" div does not push down the footer div, keeping it at the bottom of the page, like is position:fixed with bottom: 0. Scrolling the page show, except for this problem, the correct behavior, with 3 div with different color all sizing 100% the browser window.
What I'm missing?
EDIT : look at this jsfiddle https://jsfiddle.net/rq1xywng/
3 answers
solution1
2 2020-09-03 14:55:39
I am not sure about what you are looking for. May be it will be help for you.
html, body { margin: 0; padding: 0; box-sizing: border-box; height: 100vh; min-height: 100vh; } .container { height: 100vh; min-height: 100vh; background-color: fuchsia; } .header, .footer { height: 30px; } .flex-container .content { display: flex; height: 100%; height: calc(100vh - 60px); } .flex-container .content .item { width: 100%; height: 100%; } .red { background-color: red; } .yellow { background-color: yellow; } .green { background-color: green; }
<div class="container"> <div class="flex-container"> <div class="header">header</div> <div class="content"> <div class="item red">asdasd</div> <div class="item yellow">asdasd</div> <div class="item green">asdasd</div> </div> <div class="footer">footer</div> </div> <div>
solution2
1 ACCPTED 2020-09-03 14:13:29
So you have couple of errors here:
- you set EVERY ITEM IN THE CONTAINER to be 100% - this amounts to 300% :)
- their parent is "only" 100%
- footer will be hidden unless given height
- you used vh and % combined in an unhealthy way.
you should have 2 flex components:
-
.flex-container- to match to screen size .flex-container .content- to be able to stretch the items
You should set .item to flex: 1;
Here is a working version: https://jsfiddle.net/oj0thmv7/5/
Here is a working example with scroll: https://jsfiddle.net/oyLbxsrc/
solution3
-2 2020-09-03 14:04:09
If you change the 100% to 100vh this works
.flex-container .content .item {
height: 100vh;
}
Or have I misunderstood the issue?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.