html - Flexbox 不会展开

Question

使用 flexsite 元素并尝试使 flex 元素在添加的“内容”超过当前高度时扩展。

此时添加了一个滚动条。但我希望它扩大。有人知道我做错了什么吗？

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>

Answer 1

将 flex:auto 更改为 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 的评论

Meh, this makes the flex element not to fill the content if it's blank

只能在html,body中设置height:100%，在.r_flex_container<中设置min-height:100%/code> 以及 .r_flex_expand_child 中的 flex: 1(或 flex: auto)

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>