Fill the remaining height or width in a flex container
Use the flex-grow
property to make a flex item consume free space on the main axis.
This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.
A common example is flex-grow: 1
or, using the shorthand property, flex: 1
.
Hence, instead of width: 96%
on your div, use flex: 1
.
You wrote:
So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.
The squashing of the fixed-width div is related to another flex property: flex-shrink
By default, flex items are set to flex-shrink: 1
which enables them to shrink in order to prevent overflow of the container.
To disable this feature use flex-shrink: 0
.
For more details see The flex-shrink
factor section in the answer here:
- What are the differences between flex-basis and width?
Learn more about flex alignment along the main axis here:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
Learn more about flex alignment along the cross axis here:
- How does flex-wrap work with align-self, align-items and align-content?
Getting a flexbox item to fill remaining space
You should use the shorthand flex: 1
on the first child element instead of flex-grow: 1
. This sets the other properties intelligently.
Working version:
https://plnkr.co/edit/dT3qxYj7nvYN0xHT4yH8?p=preview
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
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>
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>
Related Topics
How to Center Cards in Bootstrap 4
CSS Zigzag Border with a Textured Background
How to Pre-Populate HTML Form Input Fields from Url Parameters
How to Make a Div with Irregular Shapes with CSS3 and HTML5
Items That Span All Columns/Rows Using CSS Grid Layout
CSS Vertical Align Does Not Work with Float
Responsive Tables, The Smart Way
Semantically, Which Is More Correct: a in H2, or H2 in A
Ticks for Type="Range" HTML Input
Set CSS Border to End in a 90 Instead of a 45 Degree Angle
Avoiding Repeated Constants in CSS
Wrapping Text Around an Image with Indentation and Justify
HTMLagilitypack Drops Option End Tags
Images in Github Pages and Relative Links
Overlapping/Overlaying Multiple Inline Images