javascript - li 元素溢出 Card 容器并增加父容器以适应自身

Question

我正在使用 ant design 库。所以我想把一个列表放在卡片正文中。

const MyCard = ({data}) = > {

  return (
    <Card
      title={"Hello"}
      style={{ flex: '1 1 auto' }}
      bodyStyle={{
        padding: 0,
      }}
    >
      <List
        style={{overflow:'auto'}}
        dataSource={data}
        renderItem={(item) => (
          <li>
            hello
          </li>
        )}
      />
  </Card>
  )
}

当它被渲染时 li s 和 ul溢出<Card>成分。 ul增加以适应其子项li s。但是Card.body不会增加其尺寸。我想让列表保留在卡体内，请帮忙。

我已经尝试过overflow: auto, overflow: hidden适用于所有卡、卡体、列表

Answer 1

仅将 Child Card 从 overflow:hidden 更改为 overflow:auto 并不能解决我的问题。

分两步解决。

1. 将父级 div 从 display:flex 更改为 display:grid
2. 将子 Card 从 overflow:hidden 更改为 overflow:auto