如何让React Flexbox拉伸到全屏高度

我正在尝试创建一个针对移动设备进行优化的 React 应用程序，并且使用 Flexbox 完成大部分布局。我无法强制应用程序的主容器自动扩展到整个设备高度。

我可以应用哪些规则，特别是我的 html 容器<div id="react-app"></div>和我的主应用程序容器<App></App>这样他们就总是可以拉伸到全屏高度，即使他们的孩子不会强迫他们这样做？

您可以使用

height:100vh

对于您的 App 组件，但它在 iOS Safari 上看起来并不完美。还可以设置

        html, body, #reactapp, .App {
          height: 100%;
        }
       .App {
         display: flex;
        }