This question already has answers here:
Why does height: 100% on a child element not apply when the parent element has a min-height/max-height value but no height value?
(1 answer)
Percentage 'min-height' works only when element has indirect parent with 'display: flex'
(1 answer)
Closed 6 months ago.
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
}
.content {
height: 100%;
background-color: #c0c0c0;
}
<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>
Why doesn't div.content occupy 100% of window?
Is there a way to make div.content span 100% vertically while having div.layout flexbox?
If there isn't, how can I make it while having this header-body-footer structure?
Edit 1
div.body should follow default display property. I can't make it flexbox.
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.body {
flex-grow: 1;
flex-shrink: 0;
background-color: #a0a0a0;
display: flex;
flex-direction: column;
}
.content {
height: 100%;
background-color: #c0c0c0;
flex-grow: 1;
flex-shrink: 0;
}
<div class="layout">
Header
<div class="body">
Body
<div class="content">
Content
</div>
</div>
Footer
</div>
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
edit div.latout code -> min-height change height
Related
I have the following code as working on development with flexbox.
#container {
display: flex;
justify-content: space-around;
width: 100%;
}
.content {
border: 1px solid black;
display: flex;
flex-direction: column;
height: 400px;
width: 400px;
}
#item1 {
background-color: red;
flex-grow: 1;
height: 0;
}
#item2 {
background-color: green;
flex-grow: 1;
height: 100px;
}
#item3 {
background-color: blue;
flex-grow: 1;
height: 900px;
}
<div id="container">
<div class="content">
<div id="item1"></div>
</div>
<div class="content">
<div id="item2"></div>
</div>
<div class="content">
<div id="item3"></div>
</div>
</div>
I know that setting flex-grow: 1 would take the remaining space of its parent. However, the property height seems to have no effect whatever its value is.
Reason being your flex-direction is set to column, which mean the flex-grow reacts from top to bottom, so the flex-grow responding to the height instead of width.
another question is, why flex-direction is column, but width is filled up, because it is a <div> displayed as block, the width is auto filled by display: block;
you are using flex-grow that’s why. have a look on this https://www.w3schools.com/cssref/css3_pr_flex-grow.asp
https://stackoverflow.com/a/64748435/1095913 (down here) is right, solution is: flex-grow: 0;
Here's another reference https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
I'm trying to make a fixed "floating" footer with variable height, that always appears at the bottom even when the content changes.
I have the following Create React App HTML:
<html>
<body>
<div id="root">
<div class="app">
<div class="header"></div>
<div class="content"></div>
<div class="footer"><div>
</div>
</div>
</body>
</html>
And the following CSS: (According to second answer on Fixed header, footer with scrollable content)
html, body, #root {
height: 100%
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
}
.header {
flex-shrink: 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
flex-grow: 1;
}
.footer {
flex-shrink: 0;
}
However, as the content dynamically changes the page gets distorted and elements overlap each other. I've found that setting #root with height: 275% makes the page display properly in the expanded state (and only then).
Setting #root with min-height: 100% makes the footer appear at the middle of the page when there isn't enough content, and it is not floating anymore when the content is scrollable.
I think this is what you are trying to achieve https://codepen.io/anon/pen/bmMrOg
<div id="root">
<div class="app">
<div class="header">
header
</div>
<div class="content">
<div>content</div>
</div>
<div class="footer">
footer
<div>
</div>
</div>
And the CSS
html, body, #root {
height: 100%;
margin: 0
}
.app {
text-align: center;
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
flex-direction: column;
}
.header {
flex-shrink: 0;
background: blue;
}
.content {
overflow: auto;
flex-grow: 1;
background: red;
}
.footer {
flex-shrink: 0;
background:green;
}
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 5 years ago.
I have made a simple flexbox jsfiddle To play around with all flexbox values, but stumbled upon something that I can't explain my .item divs are spaced out for some reason and .grid is automatically stretching to full height, I'm not entirely sure why this happens?
HTML
<div class="container">
<div class="grid">
<div class="item red">a</div>
<div class="item yellow">b</div>
<div class="item blue">c</div>
</div>
</div>
CSS
.container {
width: 320px;
height: 480px;
background: black;
padding:15px;
margin: 20px auto;
display: flex;
}
.grid {
background: white;
display: flex;
width: 100%;
justify-content: flex-start;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 100%;
flex-grow: 0;
flex-basis: 100%;
align-self: auto;
align-items: flex-start;
padding: 10px 0;
}
.red { background: red; }
.yellow { background: yellow; }
.blue { background: blue; }
The align-items: flex-start (set on .grid) causes this type of behavior. As specified in the MDN docs
The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container.
If you disable it, the value will be set to stretch by default (each flex item will be stretched to fill the container).
Well, here on this fiddle I have two divs aligned with display:flex and flex-grow: https://jsfiddle.net/h7bm23ts/2/
window.longer = function() {
document.getElementsByClassName("child2")[0].innerHTML += "like this and ";
};
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box1 {
background-color: beige;
height: 300px;
flex-grow: 2;
}
.box2 {
background-color: cyan;
height: 300px;
flex-grow: 1;
}
.child1 {
background-color: green;
}
.child2 {
background-color: gray;
}
<div class="wrapper">
<div class="box1">
some nonsense
</div>
<div class="box2">
longer nonsense <button onclick="window.longer();"> even longer </button>
<div class="child1">
this child should be able to expand this div
</div>
<div class="child2">
this child should wrap when too much content is appended
</div>
</div>
</div>
However, the content in one of the divs is dynamic and when more content is appended onto a child div of it, the parent div expands and makes the boxes wrap, ruining the layout with a few button clicks.
How do I keep the gray div from expanding on more content and make it simply accept its parent's width as "strict" and wrap in it?
EDIT: I settled on https://jsfiddle.net/h7bm23ts/12/.
Try this css to achive what you need:
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.box1 {
background-color: beige;
min-height: 300px;
flex: 2 1 0; /* 2 - flex grow, 1 - flex shrink, 0 - flex basis */
}
.box2 {
background-color: cyan;
min-height: 300px;
flex: 1 0 0;
}
More about this You can find here:
https://css-tricks.com/flex-grow-is-weird/ and here: https://drafts.csswg.org/css-flexbox/#flex-grow-property, and
https://drafts.csswg.org/css-flexbox/#flexibility
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>