Reputation: 245
Working with a flexsite project and trying to make a flex element to expand when more "content" is added than the current height.
At the moment a scrollbar is added. But I want it to expand. Anyone know what I am doing wrong?
html,
body,
.r_flex_container {
height: 100%;
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
display: flex;
flex-flow: column nowrap;
background-color: blue;
}
.r_flex_fixed_child {
flex: none;
background-color: black;
color: white;
height: 100px;
}
.r_flex_expand_child {
flex: auto;
overflow: auto;
background-color: yellow;
}
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed child of the flex container </p>
</div>
<div class="slide">
</div>
<div class="r_flex_expand_child">
<article>an article blah blah blah an article blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf
asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article
blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah
blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf
asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf
an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an
article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an
article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf asdf 1 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
</article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container asdfadsf
<p> another line</p>
</div>
Upvotes: 0
Views: 386
Reputation: 87313
The only thing you actually need to do is to remove overflow: auto
from the .r_flex_expand_child
rule.
That will work in most browsers but IE (see below for IE), and the reason it does, is that a flex item by default can't be smaller than its content, hence it will overflow with an outer scroll as result, though I find the min-height
version below more correct.
Stack snippet
html, body, .r_flex_container {
height: 100%;
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
background-color: blue;
/*display: flex; already set in first rule */
/*flex-flow: column nowrap; already set in first rule, nowrap is default */
}
.r_flex_fixed_child {
flex: none;
background-color: black;
color: white;
height: 100px;
}
.r_flex_expand_child {
flex: auto;
/*overflow: auto; remove as it should not scroll */
background-color: yellow;
}
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed child of the flex container </p>
</div>
<div class="slide">
</div>
<div class="r_flex_expand_child">
<article>an article blah blah blah an article blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf
asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article
blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah
blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf
asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf
an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an
article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an
article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf asdf 1 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
</article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container asdfadsf
<p> another line</p>
</div>
</div>
To make it work in IE, do these 2 things:
height: 100%
from the html, body, .r_flex_container { ... }
rulemin-height: 100vh
to .r_flex_container { ... }
ruleThe min-height: 100vh
is needed for the .r_flex_container
to fill the viewport, even if the elements are empty, and to allow it to grow when the content is bigger.
Stack snippet 2
html, body, .r_flex_container {
/*height: 100%; removed */
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
min-height: 100vh; /* added */
background-color: blue;
/*display: flex; already set in first rule */
/*flex-flow: column nowrap; already set in first rule, nowrap is default */
}
.r_flex_fixed_child {
flex: none;
background-color: black;
color: white;
height: 100px;
}
.r_flex_expand_child {
flex: auto;
/*overflow: auto; remove as it should not scroll */
background-color: yellow;
}
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed child of the flex container </p>
</div>
<div class="slide">
</div>
<div class="r_flex_expand_child">
<article>an article blah blah blah an article blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf
asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article
blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah
blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf
asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf
an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an
article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an
article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf asdf 1 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
</article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container asdfadsf
<p> another line</p>
</div>
</div>
Upvotes: 1
Reputation: 60603
change flex:auto
to flex:1
html,
body,
.r_flex_container {
height: 100%;
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
background-color: blue;
}
.r_flex_fixed_child {
flex: none;
background-color: black;
color: white;
height: 100px;
}
.r_flex_expand_child {
flex: 1;
background-color: yellow;
}
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed child of the flex container </p>
</div>
<div class="slide">
</div>
<div class="r_flex_expand_child">
<article>an article blah blah blah an article blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf
asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article
blah blah blah asdfasdf asdf asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah
blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf
asdf 1 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf
asdf an article blah blah blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf
an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an
article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an
article blah blah blah asdfasdf asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf an article blah blah blah asdfasdf asdf asdf 1 an article blah blah
blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 2 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah
blah asdfasdf asdf asdf 3 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 4 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah
asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 5 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 6 an article blah blah blah asdfasdf
asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf 7 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
asdf asdf 8 an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf asdf asdf asdf an article blah blah blah asdfasdf
</article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container asdfadsf
<p> another line</p>
</div>
OP's comment
Meh, this makes the flex element not to fill the content if it's blank
you can set height:100%
only in html,body
and min-height:100%
in .r_flex_container
along with flex: 1
(or flex: auto
) in .r_flex_expand_child
html,
body {
height: 100%;
}
html,
body,
.r_flex_container {
display: flex;
flex-direction: column;
background: red;
margin: 0;
}
.r_flex_container {
min-height: 100%;
background-color: blue;
}
.r_flex_fixed_child {
flex: none;
background-color: black;
color: white;
height: 100px;
}
.r_flex_expand_child {
flex: 1;
background-color: yellow;
}
<div class="r_flex_container">
<div class="r_flex_fixed_child">
<p> This is the fixed child of the flex container </p>
</div>
<div class="slide">
</div>
<div class="r_flex_expand_child">
<article></article>
</div>
<div class="r_flex_fixed_child">
this is the fixed footer child of the flex container asdfadsf
<p> another line</p>
</div>
Upvotes: 1