Css 如何使用FlexBox制作垂直滚动内容

我正在尝试用flex实现一个滚动框 id为scroll的Box元素占用了可用空间，内容溢出了Box 如何使框溢出=自动并使内容可滚动 花数小时了解flex的进展情况 下面是一个真实的例子：

从“React”导入React；
导入“/styles.css”；
从“@material ui/core”导入{Box，Grid，CssBaseline}；
导出默认函数App（）{
返回(
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
ssss
);
}

在Box组件上添加自动溢出

<Box overflow="auto" flex={1} flexDirection="column" display="flex" p={2}>

下图是我对您描述的布局的理解。如果这不是你想要的，那么你可能需要让你的问题更加清晰

---

在Box组件上添加自动溢出

<Box overflow="auto" flex={1} flexDirection="column" display="flex" p={2}>

下图是我对您描述的布局的理解。如果这不是你想要的，那么你可能需要让你的问题更加清晰

---

id=scroll的内容仍然会占用更多的可用空间，我希望它不会从100vh中占用更多的空间，如果是scrollPosted codesandbox和overflow auto，它似乎在做您描述的事情。？？codesendbox无法在id滚动超过100vh的情况下工作，并且内容覆盖在容器盒上。我在外框周围加了黄色边框，在id滚动框上加了红色边框。如你所见，外框只占用100vh，id滚动框的内容是可滚动的。我将尝试以更好的方式表达我的问题，我只需要其中一个滚动框，而不是所有的静止框。id=滚动框的内容将占用更多的可用空间，我不希望它从100vh中占用更多的空间，如果是这样，请滚动代码沙盒使用overflow auto，它似乎在做您描述的您想要做的事情。？？codesendbox无法在id滚动超过100vh的情况下工作，并且内容覆盖在容器盒上。我在外框周围加了黄色边框，在id滚动框上加了红色边框。正如你所看到的，外框只需100vh，id滚动框的内容是可滚动的。我将尝试以更好的方式表述我的问题，我只需要其中一个滚动框，而不是所有的滚动框