css - 使用 flex 在 React 中的全高

Question

我找不到这个问题的答案，尽管有很多 flex 主题的问题。

我创建了一个简单的 React 应用程序 (npx create-react-app)。

然后我删除了 App.css 并将 index.css 的内容设置为:

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

接下来，在 App.js 中，我尝试使用 flex 获得全屏元素:

import React from 'react';


function App() {
  return (
    <div style={{ backgroundColor: 'blue', display: "flex", flex: 1 }}>
      <div style={{ display: "flex", flexDirection: "column", flex: 1 }} />
    </div>
  );
}

但这行不通。为什么 flex 元素没有拉伸(stretch)？

Answer 1

当 flex 中有其他元素时，flex-grow 起作用。与其他元素相比，它使元素增长 x 倍。

根据您实现的解决方案:内部 div 也不需要 display: flex 和方向。它将继承自父 div。

让div占满高度。将 height: 100vh 添加到父 div。

让我知道这是否能解决问题。

谢谢。