Html 使多列可滚动的布局？CSS

我的布局如下：

带有固定标题和高度为100vh的内容容器-标题高度。在content中，我有两列，我希望当它们大于容器时，它们可以滚动

如何将滚动条添加到固定高度内的每一列

 <Layout>
    <Header style={{ position: "fixed", zIndex: 1, width: "100%" }}></Header>
    <Content
      style={{
        marginTop: 64,
        paddingTop: 8,
        height: "calc(100vh - 64px)",
        width: "100%"
      }}
    >
      <Row>
        <Col style={{ overflowY: "scroll" }} lg={6} md={9} sm={23} xs={23}>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
          <Card>hello World</Card>
        </Col>
        <Col lg={18} md={16}>
          <Card
            style={{
              height: "calc(100vh - 64px)"
            }}
          >
            //super long text content
            ...
          </Card>
        </Col>
      </Row>
    </Content>
  </Layout>

你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
//超长文本内容
...

我不确定你的代码是怎么处理的，但你把它弄得很复杂。我简化了您的代码以实现您想要的

为了实现想要的设计，我使用了css网格

网格有两行，一行用于标题，一行用于内容。标题行高度定义为

min content

，这将确保其适应保持响应所需的高度。收割台本身的最小高度设置为

64px

。然而，如果出于某种原因需要更多的空间，那么它将相应地进行调整

然后第二行是内容。其高度设置为

auto

。整个网格高度设置为

100vh

。因此，

auto

将填充所有剩余空间，而无需使用

css calc函数

第二行还将

overflow-y

设置为

auto

。如果内容高于容器，则会出现滚动条

正文{
填充：0；
保证金：0；
高度：100vh；
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：最小内容自动；
栅柱间隙：10px；
}
身体科{
填充物：5px；
}
#标题{
格构柱：跨度2；
最小高度：64px；
}
#左上校，
#右边{
溢出y：自动；
}

标题
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
你好，世界
超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

超长文本

我想你也需要链接boostrap？还重置了一些CSS规则（除非我不知道有内置类）。可能的例子：