Javascript li元素溢出卡片容器，并增加父容器以适应自身

我正在使用ant设计库。所以我想把一张清单放在一张卡片上

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>
  )
}

constmycard=（{data}）=>{
返回(
(

你好

)}
/>
)
}

当这被呈现时，

li

s和

ul

溢出

组件

ul

增加以适合其子级

li

s。但是，

Card.body

不会增加其大小。我想让名单留在卡体里面，请帮忙

---

我尝试了所有卡、卡体、列表的

overflow:auto、overflow:hidden

，只是将子

card

从

overflow:hidden

更改为

overflow:auto

并没有解决我的问题

分两步解决

将父级

div

从

display:flex

更改为

display:grid

将子

卡

从

溢出：隐藏

更改为

溢出：自动

---

只是将子

卡

从

溢出：隐藏

更改为

溢出：自动

并没有解决我的问题

分两步解决

将父级

div

从

display:flex

更改为

display:grid

将子

卡

从

溢出：隐藏

更改为

溢出：自动

---

我希望你们面临设计问题。使用flex，您可以共享屏幕截图。你可以试试flex-wrap或者访问@NavedKhan：我不认为这是因为display-flex。我尝试了默认的显示、块和flex。都一样我已经包括了一个屏幕快照我不是专家，但是

标签不需要用

关闭吗？您是否尝试过将flex更改为

flex:1 0自动？@MihailMinkov YesI希望您面临设计问题。使用flex，您可以共享屏幕截图。你可以试试flex-wrap或者访问@NavedKhan：我不认为这是因为display-flex。我尝试了默认的显示、块和flex。都一样我已经包括了一个屏幕快照我不是专家，但是
标签不需要用
关闭吗？您是否尝试过将flex更改为
flex:1 0自动？@MihailMinkov是