CSS两行Flexbox布局：实现首行宽度由第二行决定的需求

核心思路是利用CSS内在尺寸收缩特性，把两行包裹在一个自动收缩到内容最大宽度的容器里，让首行宽度被第二行的宽度“约束”，具体实现如下：

实现步骤 #

• 在外层添加一个容器，设置display: inline-block（或inline-flex配合垂直排列），这个容器的宽度会自动适配内部最宽元素的宽度，也就是第二行的总宽度。
• 首行容器设置width: 100%，强制继承外层容器的宽度，即第二行的宽度，内部保留你需要的Flex布局，左标题右顶对齐图片。
• 第二行保持你要求的固定Flex布局：左侧固定宽度，右侧随内容自动调整宽度。

代码示例 #

HTML结构 #

<div class="outer-wrapper">
  <!-- 首行：标题区 -->
  <div class="header-row">
    <h1>页面标题</h1>
    <div class="header-icon">
      <img src="你的图片地址" alt="图标">
    </div>
  </div>
  <!-- 第二行：内容区（固定使用Flex） -->
  <div class="content-row">
    <div class="fixed-col">固定宽度区</div>
    <div class="fluid-col">
      这里是长度动态变化的文本内容，比如名称列表：张三、李四、王五、赵六...
    </div>
  </div>
</div>

CSS样式 #

/* 外层容器：自动收缩到内部最大宽度 */
.outer-wrapper {
  display: inline-block;
  border: 1px solid #ccc; /* 可选，方便查看布局效果 */
}

/* 首行容器：继承外层宽度，内部Flex布局 */
.header-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between; /* 让标题和图标分别居左右 */
  margin-bottom: 1rem;
}

/* 第二行固定Flex布局 */
.content-row {
  display: flex;
  align-items: flex-start;
}

.fixed-col {
  width: 120px; /* 自定义你的固定宽度值 */
  background: #f0f0f0;
  margin-right: 1rem;
}

.fluid-col {
  flex: 0 1 auto; /* 让宽度随内容自动调整，不强制拉伸 */
  background: #e0e0e0;
}

原理说明 #

• inline-block的外层容器不会像块级元素一样占满父容器宽度，而是根据内部元素的最大宽度确定自身宽度，这里第二行的总宽度是左侧固定宽度+右侧内容宽度，因此外层容器的宽度等于这个值。
• 首行容器设置width: 100%后，会完全匹配外层容器的宽度，从而实现“首行宽度由第二行决定”的需求。
• 第二行的Flex布局完全保留了你要求的实现方式，核心逻辑无改动。

如果需要让整个模块居中，可给外层容器的父元素添加text-align: center，或用Flex布局实现居中。

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