CSS Flex布局优化：按钮列自适应内容，标题列占剩余空间的正确实现

你不需要用flex-grow:9999这种取巧方式，用flex布局的标准属性就能完美实现需求，核心是控制两个列的flex增长、收缩特性：

修改后的完整代码 #

CSS #

.cont {
  display: flex;
}

.title {
  white-space: nowrap;
  background: lightblue;
  /* 核心：占据剩余空间，允许收缩以适配容器 */
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

.buttons {
  background: pink;
  /* 核心：宽度由内容决定，禁止收缩 */
  flex: 0 0 auto;
  display: flex;
  gap: 10px; /* 替代margin，更简洁的间距控制 */
}

.buttons>div {
  background: blue;
  width: 100px;
  height: 20px;
  color: white;
  text-align: center;
}

HTML（无需修改） #

<div class="cont">
  <div class="title">
    Title title title title title title title title title title title title title
  </div>
  <div class="buttons">
    <div>btn</div>
    <div>btn</div>
    <div>btn</div>
  </div>
</div>

关键属性说明 #

• .title 的 flex: 1 1 auto：

  • flex-grow: 1：自动占据容器的所有剩余可用空间
  • flex-shrink: 1：当容器宽度不足时，允许标题列收缩（配合overflow:hidden和text-overflow:ellipsis实现文本省略）
  • flex-basis: auto：初始宽度由标题内容决定，但最终会被flex-grow拉伸至剩余空间

• .buttons 的 flex: 0 0 auto：

  • flex-grow: 0：不参与剩余空间的分配，不会抢占标题列的空间
  • flex-shrink: 0：容器宽度不足时，按钮列不会被压缩，始终保持自身内容的总宽度（按钮宽度+间距）
  • flex-basis: auto：宽度由内部按钮的总尺寸（包括gap间距）自动计算

额外优化 #

用gap:10px替代原来的margin-right，不需要单独处理最后一个按钮的margin，是flex布局中更简洁、更健壮的间距控制方式。

内容的提问来源于stack exchange，提问作者Adrian Rosca