前端 - antd中是否有哪个组件可以进行包容所有的内容，展示不出的时候就可以滚动？

Question

在开发的时候，发现内容比较多的时候就隐藏了下面的部分。

请问一下：antd中是否有哪个组件可以进行包容所有的内容，展示不出的时候就可以滚动？

Answer 1

在Ant Design (Antd) 中，可以使用 Card 组件与 Table 组件结合，并配合 CSS 来实现当内容溢出时可以滚动的效果。以下是一个示例：

import React from 'react';import { Card, Table } from 'antd';const columns = [  { title: 'id', dataIndex: 'id', key: 'id' },  { title: '项目名', dataIndex: 'name', key: 'name' },  { title: '项目描述', dataIndex: 'description', key: 'description' },  { title: '位置', dataIndex: 'location', key: 'location' },  { title: '是否选中', dataIndex: 'selected', key: 'selected' },  { title: '创建时间', dataIndex: 'createdTime', key: 'createdTime' },  { title: '更新时间', dataIndex: 'updatedTime', key: 'updatedTime' },  { title: '操作', dataIndex: 'actions', key: 'actions' },];const data = [  { id: 1, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },  { id: 2, name: 'string', description: 'string', location: 'string', selected: '否', createdTime: '时间', updatedTime: '时间', actions: '选择 删除' },  // 添加更多数据以测试滚动效果];const ScrollableTable = () => {  return (    <Card style={{ height: '400px', overflow: 'auto' }}>      <Table         columns={columns}         dataSource={data}         pagination={{ pageSize: 50 }} // 设置分页        scroll={{ y: 300 }} // 设置表格高度以允许滚动      />    </Card>  );};export default ScrollableTable;

解释
Card 组件：使用 Card 组件包裹 Table 组件，并设置 height 和 overflow 属性，使其在内容溢出时能够滚动。
Table 组件：
columns：定义表格的列。
dataSource：提供表格的数据源。
pagination：设置分页，每页显示50条数据。
scroll：设置表格的滚动高度。
样式调整
可以根据需要进一步调整样式，以适应具体的需求。上述代码示例设置了表格的高度为300px，可以根据实际情况进行调整。通过使用 Card 组件包裹 Table 组件，并设置适当的样式，可以实现内容溢出时的滚动效果。

Answer 2

用css在对应的元素上设置overflow: auto;溢出滚动

https://www.runoob.com/cssref/pr-pos-overflow.html