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

Question

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

在内容div中会有一个左div和一个右div。当视图的宽度很小时，左div应该堆叠在右div之上，以形成单列布局。这是单列布局的屏幕截图。在定义了一定的宽度后，右div应该移到左div旁边，以形成两列布局。这是两列布局的屏幕截图。

我遇到的问题是，当我们使用单列布局时。右div应该垂直展开以填充内容div的剩余空间。这意味着，无论视图的高度如何，左div的高度都应该足够大，只包含其内容，右div的高度应该垂直扩展以填充剩余空间。下面是所需行为的屏幕截图。然而，这不是我所看到的行为。这是当前行为的屏幕截图。

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

想法？这是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

根据你的描述，你的代码笔(在Chrome中(似乎按照你想要的方式运行，我很困惑什么不起作用？

在IE11(它不运行codepen(中，你仍然可以使用dappet.com。你的代码片段在那里中断，但如果你把#editor改为display: block;并设置p {margin: 0; padding: 1rem;}，它就可以工作了。