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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

OP的评论

  

嗯，这使得flex元素不填充内容，如果它是空白

您只能height:100%中的html,body和min-height:100%中的.r_flex_container以及flex: 1中的flex: auto（或.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; } }

＆＃13;

＆＃13;

<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>

＆＃13;

<kendo-grid-column field="ApplicationShortName" [width]="100" title="{{ 'LABEL_APPLICATIONSHORTNAME' | translate }}">
        <ng-template kendoGridFilterMenuTemplate>
            <grid-filter-menu [column]="'ApplicationShortName'"
                              [instanceId]="instanceId"
                              (filterEvent)="filterChange($event)">
            </grid-filter-menu>
        </ng-template>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您唯一需要做的就是从overflow: auto规则中删除.r_flex_expand_child。

这在大多数浏览器中都有效，但IE（参见下面的IE）及其原因是，默认情况下，弹性项目不能小于其内容，因此它会溢出外部滚动条结果，虽然我发现下面的min-height版本更正确。

Stack snippet

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

要使其在IE中运行，请执行以下两项操作：

• 从height: 100%规则
中删除html, body, .r_flex_container { ... }
• 将min-height: 100vh添加到.r_flex_container { ... }规则

min-height: 100vh需要.r_flex_container来填充视口，即使元素为空，也允许它在内容较大时增长。

Stack snippet 2

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;