当使用 `display: grid` 与 `grid-auto-flow: column` 布局时，父容器默认不自动撑开以容纳所有横向排列的子项，导致滚动区域背景截断；通过 `width: fit-content` 可使容器精确匹配子元素总宽度，解决溢出显示异常问题。
在 CSS Grid 中，grid-auto-flow: column 会将子元素按列方向依次排列，但网格容器本身仍遵循块级盒模型的默认尺寸行为：它不会自动扩展宽度来包裹所有列向子项（尤其当父容器设置了 overflow-x: scroll 时）。结果是——容器的计算宽度仅等于其内容区（content box）的初始宽度（如 auto 下通常为父容器宽度），而非所有子项的累计宽度，因此背景色、边框等视觉样式会在滚动时“提前结束”，造成视觉割裂。
✅ 正确解法是显式设置容器宽度为 fit-content：
.kalendar-dates {
display: grid;
grid-auto-flow: column;
gap: 8px;
width: fit-content; /* ✅ 关键：让容器宽度等于所有子项总宽度 + 间隙 */
/* 避免意外换行 */
white-space: nowrap;
}⚠️ 注意事项：
- fit-content 是现代浏览器广泛支持的值（Chrome 102+、Firefox 103+、Safari 15.4+），若需兼容旧版 Safari，可降级使用 width: max-content（语义更严格，但效果一致）；
- 确保父容器（即带 overflow-x: scroll 的根容器）未设置 width: 0 或 min-width: 0 等抑制伸缩的属性；
- 若子项含弹性内容（如文本、图片），建议为子项设置明确的 flex-shrink: 0 或 min-width: 0 防止压缩干扰宽度计算；
- 不要依赖 grid-template-columns: repeat(auto-fit, ...) —— 它适用于响应式列数控制，而非横向无限延展场景。
? 补充技巧：如需在滚动容器内居中对齐该 grid 容器，可配合 margin: 0 auto（需确保父容器有明确宽度或 inline-block 行为），或使用 scroll-snap-align: center 提升用户体验。
立即学习“前端免费学习笔记（深入）”；
总之，width: fit-content 是解决 Grid 横向流式布局中“父容器不随子项撑开”问题的简洁、标准且语义清晰的方案。
