当使用 `display: grid` + `grid-auto-flow: column` 构建水平滚动布局时，父容器默认不会自动撑开以容纳所有列项，导致背景截断、滚动内容溢出可视区域；通过 `width: fit-content` 可使容器宽度精确匹配子元素总宽度。
在基于 CSS Grid 的水平滚动场景中（例如日历日期栏、横向时间轴、卡片轮播等），常见结构如下：
- 根容器：height: 100vh; width: 100vw; overflow-x: auto;
- 子容器（Grid 容器）：display: grid; grid-auto-flow: column; gap: 8px;
- 子项：固定宽高（如 width: 120px; flex-shrink: 0;）
⚠️ 问题根源在于：Grid 容器默认为块级元素，其宽度由父容器约束（如 100%），而非由 grid-auto-flow: column 生成的列内容决定。即使子项总宽度远超视口，Grid 容器也不会自动扩展——它仍保持 100% 宽度，造成背景缺失、阴影不连续、边框中断等视觉异常。
✅ 正确解法：对 Grid 容器显式设置
.kalendar-dates {
display: grid;
grid-auto-flow: column;
gap: 8px;
width: fit-content; /* 关键！让容器宽度等于所有列项总宽度 */
min-width: 100%; /* 可选：确保至少占满父容器宽度，避免小屏下过度收缩 */
}? 补充说明：
立即学习“前端免费学习笔记（深入）”；
- fit-content 是现代浏览器广泛支持的值（Chrome 63+、Firefox 63+、Safari 14.1+），它等价于 min(max-content, max(min-content, available-width))，在此场景下效果即“尽可能紧贴内容，但不超过可用空间”——而由于父容器设置了 overflow-x: auto，超出部分自然可滚动。
- ❌ 不要使用 white-space: nowrap + inline-block 模拟，这会丧失 Grid 布局的响应性与对齐能力；
- ❌ 避免 JavaScript 动态计算宽度，既增加复杂度又影响性能；
- ✅ 若需兼容旧版 Safari（
最后，确保根容器启用滚动：
.root-scroll {
width: 100%;
height: 100vh;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
}这样，.kalendar-dates 将完整包裹所有列项，背景、边框、阴影均连续渲染，滚动体验自然流畅——真正实现「内容驱动宽度，容器随需伸缩」的现代 CSS 布局逻辑。
