如何在没有高度的情况下将overflow Y添加到flexbox子项:calc函数

Question

我有一个相当复杂的布局。如果简化的话，它是一个带有两个子柔性盒项目的柔性盒。父柔盒占据屏幕的全高，子柔盒也占据全高。

我如何让一个孩子的flexbox达到全屏高度，如果它比用户屏幕大，那么应该为那个孩子显示滚动Y？我正试图找到一个没有calc函数的解决方案。。。我怎么能换一种方式呢(可能是因为身高：100%(？

子项中的内容量可能不同，所以只有当内容超过屏幕大小时，我才需要overflow。在下面的代码示例中，我需要蓝色容器占据全高并滚动，因为有很多内容。

下面是codesandbox：https://codesandbox.io/s/modest-leakey-bk75j8?file=/src/App.js

export default function App() {
return (
<div
style={{
display: "flex",
gap: "20px",
background: "pink",
minHeight: "100vh"
}}
>
<div
style={{
flex: 1,
background: "green"
}}
>
Container 1
</div>
<div
style={{
flex: 1,
background: "lightblue",
height: "500px",
overflow: "auto"
}}
>
<p>{TEXT}</p>
<p>{TEXT}</p>
<p>{TEXT}</p>
</div>
</div>
);
}

Answer 1

我认为您只需要更改浅蓝色方框样式中的一行即可实现所描述的内容。只需将maxHeight更改为maxHeight: "100vh"即可。

然后变成：

<div
style={{
flex: 1,
background: "lightblue",
maxHeight: "100vh",
overflow: "auto"
}}
>

Answer 2

您只需从蓝色框中删除height属性即可。您也可以删除overflow，但仍然具有所描述的效果。

下面是一个沙箱示例：https://codesandbox.io/s/elegant-jang-3k0pq4?file=/src/App.js