CSS Flexbox - 如何使弹性项目缩小以适应弹性容器？

Question

我试图让我的弹性项目缩小以适应弹性容器，但它似乎不起作用。

这是我的代码

我正在使用 React 和 AntD（请参阅下面的控制台中的元素）

    <Card className='items-col' title='Item List'>
        <MUIDataTable
            data={items}
            columns={columns}
            options={options}
        />
    </Card>

CSS

.quotation-grid .items-col {
    grid-area: items;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
}

.quotation-grid .items-col .ant-card-body {
    flex: 0 1 0;
}

元素

<div class='ant-card items-col ant-card-bordered'>
    <div class='ant-card-head'>...</div>
    <div class='ant-card-body'>...</div> // i want this to shrink to fit the container
</div>

截屏

感谢大家的帮助，如果我做错了什么，请告诉我，本质上我这样做的原因是我可以将表格的内部行设置为溢出：自动，以便溢出的滚动仅在行内在表中。

Answer 1

我有点困惑

flex: 0 1 0;

你不是在告诉 flexbox “我的项目的高度应该是 0，如果溢出，缩小它”？ 它永远不会缩小，因为它对于 flexbox 已经只需要 0 高度。

也许您更愿意做与“flex: 1”相同的“flex: 1 0 0”。 这意味着“我的项目的高度应该为 0，但如果我们还有空间，请增长” --- 或“占用可用空间”。 但是，如果内容仍然太大，它仍然会溢出。 你可能需要一个围绕它的容器

flex: 1;
overflow: auto;

然后将占用所有可用空间，并且永远不会被它的孩子强迫成长。