当 span 元素作为 flex 子项时，默认会受 flex-shrink: 1 影响而压缩尺寸；通过显式设置 flex-shrink: 0 可彻底解除父容器对其宽度的干预，使其严格遵循 CSS 中定义的 width 值。
当 span 元素作为 flex 子项时，默认会受 `flex-shrink: 1` 影响而压缩尺寸；通过显式设置 `flex-shrink: 0` 可彻底解除父容器对其宽度的干预，使其严格遵循 css 中定义的 width 值。
在 Flex 布局中，子元素（如 ）默认具备弹性收缩行为：当所有子项总宽度超出父容器时，浏览器会按 flex-shrink 系数自动缩小它们——即使你已为每个 span 显式设置了 width: 125px，只要父容器 .field 宽度仅 150px，两个子项（合计理论宽度 250px）就会被强制等比压缩，导致实际渲染远小于预期。
解决方法非常简洁：在 span 的样式规则中添加 flex-shrink: 0，明确禁止其参与收缩计算。这相当于告诉浏览器：“请尊重我声明的 width，不要为了填满父容器而牺牲我的尺寸”。
以下是关键修复代码（已整合进完整样式）：
.scrollable_section {
width: 125px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
border: #000 1px solid;
flex-shrink: 0; /* ✅ 核心修复：禁用弹性收缩 */
}
同时需微调位移值以匹配实际尺寸。原 .verse-two 的 transform: translateX(-65px) 是基于错误渲染宽度估算的，修正后应改为 -115px（即 125px - 10px，确保右对齐并预留 10px 起始偏移），保证动画平滑衔接：
.next-verse .verse-two {
opacity: 1;
transform: translateX(-115px); /* ✅ 适配 125px 实际宽度 */
}
⚠️ 注意事项：
- flex-shrink: 0 仅控制“是否收缩”，不影响 flex-grow 或 flex-basis；若还需防止拉伸，可一并设置 flex-grow: 0；
- 确保父容器未设置 flex-wrap: wrap，否则多行布局可能引发意外换行；
- 若需响应式适配，建议配合 min-width 或 max-width 使用，避免小屏幕下内容溢出；
- white-space: nowrap 与 overflow-x: auto 组合可实现横向滚动，但需确保父容器高度足够容纳行内内容。
总结：Flex 子项的尺寸并非完全由 width 决定，而是 flex-basis、flex-grow 和 flex-shrink 共同作用的结果。要真正“解耦”子元素尺寸与父容器约束，flex-shrink: 0 是最直接、语义最清晰的解决方案——它让 width 回归本意：一个确定的、不可妥协的尺寸声明。
