使用 `inline-block` 布局六边形网格时，因浮动与行内布局的渲染特性，末尾几行 hex 元素常溢出父容器；根本解决方法是在 `.container` 上添加 `padding-bottom`，其值等于单个六边形的水平间距（`--hex-span`），以预留足够空间容纳最后一行的垂直偏移。
在纯 CSS 构建点式六边形网格（pointy-top）时，常见方案是利用 float: left 配合 shape-outside 实现错位排布，并将 .hex 设为 inline-block 以实现流式填充。然而，这种布局存在一个隐蔽但关键的渲染问题：浏览器在计算块级容器高度时，无法准确感知由 shape-outside 和负 margin-bottom（即 --hex-overlap）共同导致的视觉行高变化，尤其当六边形行数为奇数或容器宽度接近临界值时，末尾若干元素会“悬空”于容器内容区域之外——表现为视觉上被 overflow: hidden 截断，或在调试时发现 container 的 scrollHeight 小于实际渲染高度。
该问题并非 bug，而是 CSS 行内格式化上下文（IFC）的固有行为：inline-block 元素的高度基准线（baseline）和行框（line box）高度受 vertical-align、line-height 及相邻元素影响，而 shape-outside 仅影响文字环绕，不参与盒模型高度计算。因此，容器无法自动扩展以包裹所有视觉可见的 hex 元素。
✅ 正确解法：主动预留底部安全空间
根据 CSS-Tricks 原文 的权威建议，应在 .container 上显式设置：
.container {
padding-bottom: var(--hex-span); /* 关键修复 */
}此处 --hex-span（如 50px）代表六边形的水平间距（即相邻列中心距），它恰好等于每两行 hex 在垂直方向上的视觉偏移量。添加该 padding-bottom 后，容器内容区高度被强制扩展，确保即使最后一行 hex 因 margin-bottom: var(--hex-overlap) 上浮，其整体仍被包含在 content-box 内。
? 注意事项与最佳实践：
立即学习“前端免费学习笔记（深入）”；
- ✅ 保持 font-size: 0 在 .container 上（已存在），消除 inline-block 元素间的空白字符间隙；
- ✅ 确保 .hex:last-child { margin-bottom: 0 } 生效，避免冗余下边距叠加；
- ⚠️ 避免滥用 height: fit-content 或 min-height 替代 padding-bottom，它们无法精准匹配六边形网格的几何偏移；
- ? 调试时可临时启用 outline: 1px solid blue 于 .container，直观验证是否仍有溢出；
- ? 该方案兼容 Chrome、Firefox、Safari（≥15.4），无需 JS 干预，完全声明式。
最终效果：容器尺寸严格包裹全部六边形，响应稳定，无论 hex 数量多少、窗口缩放如何，均不再出现“丢失最后一行”的现象。这是纯 CSS 六边形网格工程化落地的关键一环。
