Flexbox对齐内容：空格不起作用-页脚正好在页面下方

Question

我正在尝试使用flexbox定位页脚。我想要页脚的传统行为-如果内容小于视口，则它位于屏幕的底部。如果内容大于视口，则它在屏幕下方。我有第二个选项，但是第一个选项引起了麻烦-相反，它位于屏幕的下方。

我有类似的东西：

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh;">
  <div>header</div>
  <div>main</div>
  <footer>footer</footer>
</div>

我希望浏览器能够计算页脚的高度，并在元素之间分配空间时将其考虑在内。没发生...