为什么我的 flex 容器没有填充 100% 的高度？

Question

我正在用 React 创建一个项目。我很困惑为什么 flex 容器 .heading 没有占据屏幕高度的 100%。我试过这个：

html, body, #root {
    height: 100%;
}

/*
.MuiContainer-root {
    min-height: 100%; This is done inline in App.js
}
*/

.heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    height: 100% /*calc(100vh - 150px)*/;
    justify-content: center;
}

代码沙盒：https://codesandbox.io/s/loving-https-znwr8

我想要的结果是标题的内容对齐并对齐到中心。如果我使用 calc(100vh - 150px) 作为高度，我可以得到类似的东西，但 height: 100% 不应该单独工作吗？此外，如果我使用 height: 100vh，它会添加一个我不想要的滚动条。