给定下面的基本HTML结构(我无法更改(，我知道我可以用这个CSS:扩展主要内容div
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#columns {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>但是"columns"部分的样式我不想扩展到内容下方，所以如果可能的话，我更喜欢在页脚部分中扩展倒数第二个空的div(.contator(。
我已经尝试了我能想到的一切，但我是一个css初学者，没有任何效果。
这能做到吗？
我在SCSS模式下使用codepen找到了它，这样我就可以嵌套选择器了。这让实验变得容易多了。
事实证明，我需要两个灵活框：一个扩展整个页脚部分以填充可用空间，另一个在页脚内以类似地扩展填充容器。
以下是添加到每个内容部分的background-color代码，用于说明目的：
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
body header {
background-color: green;
}
body #columns {
background-color: blue;
}
body #footer-content {
background-color: red;
}
body .footer {
flex: 1;
display: flex;
flex-direction: column;
}
body .footer .container {
flex: 1;
}<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>