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>
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>
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
How can I make my flexbox layout take 100% vertical space?
You should set height
of html, body, .wrapper
to 100%
(in order to inherit full height) and then just set a flex
value greater than 1
to .row3
and not on the others.
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col2 {
background-color: orange;
flex: 1 1;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
#col3 {
background-color: purple;
flex: 0 0 240px;
min-height: 100%;/* chrome needed it a question time , not anymore */
}
<div class="wrapper">
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="row3">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>
How to fill vertical space with flexbox?
An initial setting of a flex container is align-content: stretch
.
That means that flex lines will equally share all available space in the container along the cross axis. (A similar effect to flex: 1
on all items on the main axis.)
However, when you define a height for a flex item when the cross axis is vertical, or width, when the cross axis is horizontal, you override the align-content
default.
In your row-direction container, the cross axis is vertical. So if you remove height: 100%
, that allows align-content: stretch
to work.
Learn more about flex alignment on the cross axis here:
- How does flex-wrap work with align-self, align-items and align-content?
Learn more about flex alignment on the main axis here:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
.container { display: flex; background: #ccc;}
.left { flex: 2; display: flex; flex-wrap: wrap; /* <--- this brings align-content into play */ /* flex-direction: row; <--- default setting; can be omitted */ /* align-items: stretch; <--- default setting; can be omitted */ /* height: 100%; */}
.right { flex: 1; border: 1px solid #000;}
.item { border: 1px solid #000; flex: 1 0 100%; align-self: stretch;}
<div class="container"> <div class="left"> <div class="item">Item 1</div> <div class="item">Item 2</div> </div> <div class="right"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div></div>
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?
Related Topics
How to Get HTML 5 Input Type="Date" Working in Firefox And/Or Ie 10
How Does Jquery Work When There Are Multiple Elements With the Same Id Value
How to Use Content-Disposition For Force a File to Download to the Hard Drive
Make Background Color Extend into Overflow Area
Ie8 Support For CSS Media Query
Input Type="Submit" VS Button Tag Are They Interchangeable
Using Sections in Editor/Display Templates
Center a Div Horizontally and Vertically
How to Target a Specific Column or Row in CSS Grid Layout
Open Link in New Tab or Window
Draw on Html5 Canvas Using a Mouse
Using HTML and Local Images Within Uiwebview
Difference Between ≪Input Type='Button' /≫ and ≪Input Type='Submit' /≫
Float:Left; VS Display:Inline; VS Display:Inline-Block; VS Display:Table-Cell;
Remove Space (Gaps) Between Multiple Lines of Flex Items When They Wrap