html - 级联 flexbox 不在第一个框之后放置内容

Question

我遇到了层叠 flexbox 的问题。我有:

• 一列 flexbox 首先放置我的内容，然后是带空格的页脚(因此页脚位于页面底部)
• 内容是行 flexbox，左边是菜单，右边是 payload。

在我下面的示例中，它在没有滚动条的“情况 1”中运行良好。内容位于页面/容器的底部。在情况 2 中，页脚放置在 View 底部(基于初始滚动)和内容上方，并且在我滚动时保持在小地方。我的目标是让它只出现在内容之后。我在不同的配置中玩过最小高度、高度、最大高度，但当我更改它们时，我似乎用另一个问题替换了一个问题。

#content1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  overflow: auto;
}

#content2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  overflow: auto;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  height: 0;
}

.main {
  display: flex;
}

<div id="content1">
  <div class="container">
    <div class="main">
      <div>
        menu
      </div>
      <div>
        Situation 1
      </div>
    </div>
    <div class="footer">
      footer 1
    </div>
  </div>
</div>
<div id="content2">
  <div class="container">
    <div class="main">
      <div>
        menu
      </div>
      <div>
        Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>
      </div>
    </div>
    <div class="footer">
      footer 2
    </div>
  </div>
</div>

Answer 1

#content1 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  overflow: auto;
}

#content2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  overflow: auto;
}

.container {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  min-height: 100%;
}

.main {
  display: flex;
}
.footer { margin-top: auto; } /* NEW */

<div id="content1">
  <div class="container">
    <div class="main">
      <div>menu</div>
      <div>Situation 1</div>
    </div>
    <div class="footer">footer 1</div>
  </div>
</div>
<div id="content2">
  <div class="container">
    <div class="main">
      <div>menu</div>
      <div>
        Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>Situation 2
        <br>
      </div>
    </div>
    <div class="footer">footer 2</div>
  </div>
</div>