当元素使用 Flexbox 换行时，仅使用 CSS 填充剩余的垂直空间

Question

我正在尝试在不使用媒体查询的情况下创建响应式视图。我的视图布局有一个内容 div 和一个页脚 div。页脚 div 应始终固定在视图底部，内容 div 应垂直扩展以填充剩余空间。

在内容 div 中将有一个左 div 和一个右 div。当视图的宽度较小时，左 div 应该堆叠在右 div 之上，形成单列布局。 Here's a screenshot of the single column layout。在一些定义的宽度之后，右 div 应该移动到左 div 旁边以形成两列布局。 Here's a screenshot of the two column layout.

我遇到的问题是当我们处于单列布局中时。右 div 应垂直扩展以填充内容 div 的剩余空间。这意味着，无论视图的高度如何，左侧 div 的高度都应该足够大以仅包含其内容，而右侧 div 的高度应垂直扩展以填充剩余空间。 Here's a screenshot of the desired behavior。但是，这不是我看到的行为。 Here's a screenshot of the current behavior.

我目前的方法是使用 Flexbox，但使用 align-item、align-self 和 align-content 的任意组合都无法实现所需的行为。我目前在左侧 div 上使用align-self: flex-start; 覆盖默认拉伸行为，但右侧 div 不想垂直扩展以填充剩余空间； Flexbox 似乎在不应该为左侧 div 分配空间。

想法？ Here's a link to the CodePen.

#editor {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid black;
  resize: both;
  overflow: auto;
  min-height: 500px;
}

#content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin-left: -8px;
}

#footer {
  height: 50px;
  background-color: red;
}

#leftPane {
  flex: 1 500px;
  margin-left: 8px;
  align-self: flex-start;
  background-color: green;
}

#rightPane {
  flex: 1 750px;
  min-height: 500px;
  margin-left: 8px;
  background-color: blue;
}

<div id="editor">
  <div id="content">
    <div id="leftPane">
      <p>This element should expand vertically to fit its contents</p>
    </div>
    <div id="rightPane">
      <p>This element should expand vertically to fill all remaining space</p>
    </div>
  </div>
  <div id="footer">
    <p>This is the footer</p>
  </div>
</div>

Answer 1

根据您的描述，您的 codepen（在 Chrome 中）似乎按照您想要的方式运行，我对什么不起作用感到困惑？

在 IE11（不运行 codepen）中，您仍然可以使用 dabblet.com。您的 sn-p 在那里中断，但如果您将 #editor 更改为 display: block; 并设置 p {margin: 0; padding: 1rem;}，它可以工作。