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

【问题标题】：CSS Flexbox - How to make flex item shrink to fit flex container?CSS Flexbox - 如何使弹性项目缩小以适应弹性容器？
【发布时间】：2020-11-27 16:13:32
【问题描述】：

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

这是我的代码

我正在使用 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>

截图

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

【问题讨论】：

标签： html css reactjs flexbox

【解决方案1】：

我有点困惑

flex: 0 1 0;

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

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

flex: 1;
overflow: auto;

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

【讨论】：