Flex 具有一个固定宽度的列和一个必须填充剩余空间的流体列[重复]

Posted 2023-03-05

【中文标题】Flex 具有一个固定宽度的列和一个必须填充剩余空间的流体列[重复]

【英文标题】：Flex with one fixed width column and one fluid column that must fill the remaining space [duplicate]

【发布时间】：2021-06-24 07:02:30

【问题描述】：

在 CSS 中有没有办法让一列具有固定宽度，第二列填充行中剩余的空间？

.container 
  display: flex;
  border: 1px solid blue;


.col1 
  height: 100px;
  flex: 0 0 80px;
  background: red;


.col2 
  height: 100px;
  background: green;

我怀疑纯 CSS 不可能，但如果有解决方案，那么解决方案是什么？

JSFiddle

【问题讨论】：

将flex-grow: 1 添加到.col2

哦，可以，谢谢！如果你回答我会接受。

有人已经发布了答案，您应该接受它作为答案:)

是的，他是在我发表评论后 3 分钟发布的，所以我猜他在我发表评论时正在写答案：) 谢谢大家！

【参考方案1】：

使用flex 速记属性，您可以在.col2 上使用flex: 1，它指定flex-grow 值。您也可以像@Yousaf 提到的那样，使用flex-grow: 1 明确定义flex-grow 值。

flex-grow CSS 属性设置弹性项目 main 大小的弹性增长因子。换句话说，flex-grow 使弹性项目占据了主轴上的所有空闲空间。

.container 
  display: flex;
  border: 1px solid blue;


.col1 
  height: 100px;
  flex: 0 0 80px;
  background: red;


.col2 
  height: 100px;
  background: green;
  flex: 1;
  /* flex-grow: 1; This also works! */

<div class="container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>