通过将容器的 display 从 flex 改为 inline-flex，可使 Flex 容器宽度由其内部最宽子项（如 .first-line）决定，同时确保后续子元素（如 .second-line）自然继承该宽度，无需固定尺寸或 JavaScript 干预。

通过将容器的 `display` 从 `flex` 改为 `inline-flex`，可使 flex 容器宽度由其内部最宽子项（如 `.first-line`）决定，同时确保后续子元素（如 `.second-line`）自然继承该宽度，无需固定尺寸或 javascript 干预。

在构建响应式、内容驱动的布局时，常遇到这样的需求：父容器不应占据整行（即不表现如块级元素般撑满父容器），而是“收拢”至其内部 widest 子元素的宽度；同时，所有子行需严格对齐、等宽。默认使用 display: flex 会使 .notes-container 表现为块级弹性容器，强制占据可用行内宽度（通常为 100%），导致 .second-line 即便内容更少，也会被拉伸填满整个容器宽度，破坏视觉一致性。

解决方案：改用 inline-flex

.notes-container {
  display: inline-flex; /* 关键修改：由块级变为内联级弹性容器 */
  flex-direction: column;
  /* 可选：添加 vertical-align 或 margin 优化垂直对齐 */
}

.first-line {
  display: flex;
  flex-direction: row;
  /* 无需额外设置，其自然宽度即为所有子项总和 + 间隙 */
}

.second-line {
  display: flex;
  justify-content: space-between;
  /* 移除 flex-grow: 1 —— 它会强制子项扩张，破坏宽度一致性 */
  /* 此时 .second-line 宽度由 .first-line 决定，自动对齐 */
}

✅ 效果说明：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• .notes-container 不再独占一行，而是像 一样“包裹”内容，宽度等于 .first-line 的实际渲染宽度（含 padding、gap 等）；
• .second-line 作为同级 flex 项目，在 inline-flex 容器中自动获得与 .first-line 相同的基础主轴尺寸（即宽度），justify-content: space-between 在该固定宽度内均匀分布子项；
• 所有行为纯 CSS 驱动，无 JS、无 width 硬编码、无 min-width 折衷方案。

⚠️ 注意事项：

• 若 .notes-container 位于文本流中（如段落内），注意 inline-flex 默认 vertical-align: baseline，必要时可设 vertical-align: top 避免基线对齐错位；
• inline-flex 容器不支持 width: 100%（因内联特性），若需响应式收缩，请配合 max-width 或媒体查询约束；
• 避免在 .second-line 中误用 flex-grow: 1 —— 它会覆盖宽度继承逻辑，导致子项异常拉伸。

此方法简洁、标准、兼容性好（Chrome 21+ / Firefox 20+ / Safari 6.1+ / Edge 12+），是实现“内容定宽 + 多行对齐”布局的推荐实践。