通过 CSS Flexbox 的 gap 属性结合父容器宽度控制，可让上下标题在空间充足时并排显示（5px 水平间隙），空间不足时自动换行（18px 垂直间隙），同时保持左侧边框始终等高包裹整个容器。

通过 css flexbox 的 `gap` 属性结合父容器宽度控制，可让上下标题在空间充足时并排显示（5px 水平间隙），空间不足时自动换行（18px 垂直间隙），同时保持左侧边框始终等高包裹整个容器。

要实现「空间足够则左右并排、空间不足则上下堆叠，且两种状态使用不同间距」的效果，关键在于 利用 Flexbox 的二维 gap 控制能力，而非依赖媒体查询或 JavaScript。原方案中 display: flex 已正确选用，但缺失两个核心要点：一是未启用 flex-wrap: wrap 的完整潜力，二是未约束父容器宽度以触发换行逻辑。

✅ 正确解法如下：

1. 为 .title-wrapper 启用双维度 gap：

   .title-wrapper {
     display: flex;
     flex-wrap: wrap;
     color: #FFFFFF;
     border-left: 1px solid white;
     padding-left: 2.2%;
     gap: 18px 5px; /* 语法：gap: [row-gap] [column-gap] */
   }

   • gap: 18px 5px 表示：换行时行间距为 18px，不换行时列间距为 5px。这是 Flexbox 规范原生支持的特性（现代浏览器均兼容）。

2. 确保父容器宽度可控（关键！）：

   <div style="width: 100%;"> <!-- 必须显式设置宽度，否则 flex 容器可能无限宽，永不换行 -->
     <div class="title-wrapper">
       <div class="upper-title">DYNAMICALLY ADDING TITLE</div>
       <div class="lower-title">DYNAMICALLY ADDING TITLE</div>
     </div>
   </div>

   • 若 .title-wrapper 的父元素未设宽度（如 display: contents 或 position: absolute 等场景），Flex 容器可能忽略视口限制。显式设置 width: 100% 可确保其尊重容器边界，从而在内容总宽度超限时自然触发 flex-wrap 换行。

3. 子元素无需额外样式（推荐）：

   .upper-title,
   .lower-title {
     /* 通常无需设置 flex-basis 或 min-width —— 让内容自然撑开 */
     /* 如需强制最小宽度，可用 flex: 0 0 auto 或 min-width: 120px */
   }

⚠️ 注意事项：

• gap 在 Flexbox 中对 flex-wrap: wrap 生效的前提是：容器有明确的宽度约束。仅靠 flex-wrap: wrap 不足以触发换行，必须配合宽度限制（如 width, max-width, 或父容器 inline-flex 等）。
• 左侧边框 (border-left) 会自动延伸至整个 .title-wrapper 高度（无论单行或双行），因为 flex-wrap 不影响容器盒模型高度计算，完美满足设计需求。
• 避免使用 margin-bottom 模拟垂直间距 —— 这会导致单行时出现多余空白，且破坏语义结构。

? 总结：该方案轻量、响应式、无 JS 依赖，完全基于现代 CSS 能力。只需两步：gap: 18px 5px + 父容器宽度约束，即可优雅实现「智能间距切换」，兼顾视觉一致性与布局鲁棒性。