Fill remaining vertical space with CSS using display:flex
Make it simple : DEMO
section { display: flex; flex-flow: column; height: 300px;}
header { background: tomato; /* no flex rules, it will grow */}
div { flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ background: gold; overflow: auto;}
footer { background: lightgreen; min-height: 60px; /* min-height has its purpose :) , unless you meant height*/}
<section> <header> header: sized to content <br/>(but is it really?) </header> <div> main content: fills remaining space<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- uncomment to see it break --> x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> x <br>x<br>x<br>x<br>x<br>x<br>x<br>x<br>x<br> <!-- --> </div> <footer> footer: fixed height in px </footer></section>
How to have 1 column in a flex box fill remaining space
try adding flex: 1; in #titles.
learn about flex properties over here
#titles {
flex: 1;
}
codepen link
Flexbox fill available space vertically
So you can try this:
flex-direction: column
for the flex container.flex: 1
for the element that needs to fill the remaining space.
See demo below where the flexbox
spans the viewport height:
body { margin: 0;}*{ box-sizing: border-box;}.row { display: flex; flex-direction: column; height: 100vh;}.flex { flex: 1;}.row, .row > * { border: 1px solid;}
<div class="row"> <div>some content</div> <div class="flex">This fills the available space</div> <!-- fills/grows available space --> <div>another content</div></div>
CSS: How to make div fill remaining height inside of a flex-child
It would be more helpful when you would of provided your existing CSS to better understand what you are trying to do. However I hope the example below will help you figure out how to solve what you are trying to accomplish.
Html:
<div class="flex-parent-row">
<div class="flex-child">
<div class="auto-height"> auto div</div>
<div class="i-want-this-one-to-fill-remaining-height"> fill remaining div</div>
</div>
</div>
CSS:
.flex-parent-row {
display: flex;
flex-direction: column;
height: 200px;
width: 500px;
border: 1px solid #000;
}
.flex-child {
border: 1px solid #000;
background-color: red;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.auto-height {
background: orange;
}
.i-want-this-one-to-fill-remaining-height {
flex-grow: 1;
background-color: lightblue;
}
If you need additional help please provide more code.
flexbox layout: take remaining space but do not expand more than 100% of remaining space
You did not close properly your div <div/>
instead </div>
, Also, less CSS can be used
body{margin:0}
<div style="height: 100vh; display: flex; flex-direction: column;">
<div>
This is some fixed heighted content
</div>
<div style="flex:1;overflow:auto;">
A lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the divA lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the divA lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the divA lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the divA lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the divA lot of text content here that overflows the remaining space.
So this div should take up the remaining available space (100vh - space of div above)
and the inner content should become scrollable
But it ends up expanding the div to the text content and thus the whole screen becomes
scrollable instead of just the div
</div>
</div>
Make inner div fill remaining height using flex
I edited @Sfili_81's answer and added these to the *
margin: 0;
padding: 0;
Here's the entire code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.home-content {
display: flex;
border: 1px solid black;
height: 100vh;
flex-flow: column;
}
.container {
flex: 1;
display: flex;
flex-direction: column;
border: 1px solid red;
}
#listItems {
border: 3px solid green;
flex: 1 1 100%;
}
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
</div>
</div>
</div>
</div>
Related Topics
Align Mat-Cards Content (Image, Text and Buttons)
Align an Image and Some Text on the Same Line Without Using Div Width
Is Float For Layout Bad? What Should Be Used in Its Place
Z-Index Not Working With Fixed Positioning
Css Selector For "Foo That Contains Bar"
Z-Index Is Canceled by Setting Transform(Rotate)
Which CSS Properties Are Inherited
Control the Dashed Border Stroke Length and Distance Between Strokes
Detect If a Browser in a Mobile Device (Ios/Android Phone/Tablet) Is Used
Change Button Border Color When the Button Is Being Clicked and After
Size of Html5 Canvas Via CSS Versus Element Attributes
Does "Display:None" Prevent an Image from Loading
Center Content in Responsive Bootstrap Navbar