CODEWITHSUNDEEP
htmlcssflexbox
Jack
Jack

Reputation: 245

Flexbox wont expand

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?

JSfiddle

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

Answers (2)

Asons
Asons

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:

  • Remove height: 100% from the html, body, .r_flex_container { ... } rule
  • Add min-height: 100vh to .r_flex_container { ... } rule

The 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

dippas
dippas

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

Related Questions