使用 display: inline-flex 替代 display: flex，可使容器宽度由内部 widest 子项（如 .first-line）决定，同时确保后续行（如 .second-line）自动继承该宽度，无需固定尺寸或 JavaScript 干预。
使用 `display: inline-flex` 替代 `display: flex`，可使容器宽度由内部 widest 子项（如 `.first-line`）决定，同时确保后续行（如 `.second-line`）自动继承该宽度，无需固定尺寸或 javascript 干预。
在 CSS 布局中，当希望一个 Flex 容器（如 .notes-container）不占据整行、而是紧密包裹其内容宽度，同时让多个子行（.first-line 和 .second-line）保持一致的宽度时，关键在于理解 flex 与 inline-flex 的根本差异：
- display: flex 会使容器表现为 块级弹性容器，默认宽度为 100%（即撑满父容器可用宽度），即使内容很窄；
- display: inline-flex 则使其表现为 内联级弹性容器，宽度由内部最大固有宽度的子项（通常是 .first-line 的总内容宽度）决定，且其他子项（如 .second-line）会自然继承该计算后的宽度。
✅ 正确实现如下：
.notes-container {
display: inline-flex; /* ? 核心修改：启用内容自适应宽度 */
flex-direction: column;
/* 可选：添加 vertical-align 或 margin 优化行内对齐 */
}
.first-line {
display: flex;
/* 不需额外设置 width；由子元素内容自然撑开 */
}
.second-line {
display: flex;
justify-content: space-between;
/* 移除 flex-grow: 1 —— 它在此场景下无效且可能干扰宽度继承 */
/* .second-line 会自动获得与 .first-line 相同的宽度 */
}
⚠️ 注意事项：
- 确保 .notes-container 的父元素允许内联元素存在（如非 text-align: center 等影响布局的规则）；
- 若 .first-line 中子元素含 flex: 1 或 min-width: 0 等收缩性样式，可能影响其固有宽度计算，建议用 width: fit-content 或 inline-flex 包裹调试；
- inline-flex 容器默认存在基线对齐行为，如需垂直居中，可添加 vertical-align: top；
- 不要对 .second-line 设置 flex-grow: 1 —— 在 column 方向的 inline-flex 容器中，该声明对水平宽度无作用，反而可能引发意外交互。
? 总结：inline-flex 是解决“Flex 容器按内容定宽 + 多行对齐”问题的轻量、纯 CSS 方案，无需 JS 测量、无额外 wrapper、语义清晰，适用于工具提示、注释栏、紧凑型表单组等场景。
