Html 将页脚推到flexbox的底部

我希望我的ReactModal位于视口的底部，但它位于结果的正下方，我迄今为止所做的所有尝试都未能纠正该问题。我知道这是一个常见的问题，网上有很多解决方案，但我如何设置CSS的问题是，不允许

flex grow

属性以我期望的方式工作。有什么想法吗

JSX:

---

flex grow指定应将flex容器中剩余空间的多少分配给该项。如果您试图将ReactModal放置到视口底部，可能需要使用下面的示例

编辑

如果查看css文件，您将添加以下内容：

position: fixed;
bottom: 0;

它会将其放置在页面底部。您不会使用flex grow，因为在这种情况下它是完全无用的

希望这能有所帮助。

但它是“.main content”的兄弟。这不会产生你所建议的效果吗？

* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
}

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 1.5rem;
  align-content: center;
  min-height: 100vh;
}

.main-content {
  flex-grow: 1;
}

position: fixed;
bottom: 0;