使用flex在滚动屏幕上保持固定的页脚

Question

下面的代码是一个简单的页面，该页面期望在固定页脚（称为red）的顶部具有可滚动内容（称为green）

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.red {
  background-color: red;
  overflow-y: scroll;
}

.green {
  background-color: green;
  overflow-y: none;
}

<div class="container">
  <div class="red">
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
    <p>Line</p>
  </div>
  <div class="green">
    <p>FOOTER LINE 1</p>
    <p>FOOTER LINE 2</p>
  </div>
</div>

代码很简单，但是我的green页脚正在与内容一起滚动。

如何修复CSS代码以将green页脚固定在屏幕底部？

[编辑] 建议的重复项不能解决我的问题，因为它需要我指定页脚高度。我需要页脚根据其内容确定其高度，并在顶部保留剩余空间以显示可滚动的内容。