当家族树分支过多、姓名过长时，传统浮动布局会导致节点重叠或错位；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配最长子内容，并结合容器溢出控制实现水平滚动浏览。
在构建大型家族树（Family Tree）时，CSS 浮动（float: left）虽能实现基础层级排布，但默认情况下 li 元素会按父容器宽度收缩换行，导致深层分支被“挤”到上方节点下方，出现文字重叠、连接线错乱等问题——尤其当左右两支家族成员姓名较长（如 “Christopher Benjamin Wellington-Smith”）时，该问题尤为突出。
核心解决方案是：解除 li 的隐式宽度限制，使其根据内部最长内容自动伸展。CSS 提供了精准的内在尺寸关键字 max-content，它表示元素内容在不折行前提下的自然最大宽度（对文本即“完全不换行的单行宽度”）。只需将其应用于 .tree li：
.tree li {
width: max-content; /* 关键声明：阻止自动换行，撑开横向空间 */
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 20px 5px 0 5px;
transition: all 0.5s;
}✅ 效果说明：
- 每个 li 将严格包裹其最宽子节点（例如含多层嵌套 <ul> 的祖先节点），避免因宽度不足导致子树坍缩；
- 整个树结构将沿 X 轴线性延展，不再纵向堆叠；
- 配合外层容器启用水平滚动，即可完整浏览任意深度/宽度的家族关系。
? 必备配套设置（确保滚动可用）：
在 .tree 容器上添加以下样式，启用水平滚动并隐藏垂直溢出：
.tree {
overflow-x: auto; /* 启用横向滚动条 */
overflow-y: hidden; /* 隐藏多余垂直滚动 */
white-space: nowrap; /* 防止内部文本意外折行 */
}⚠️ 注意事项：
- max-content 在现代浏览器（Chrome 57+、Firefox 63+、Safari 14.1+、Edge 79+）中完全支持；若需兼容旧版 IE，可考虑 display: inline-block + white-space: nowrap 替代方案，但灵活性较低；
- 避免对 .tree ul 设置固定宽度或 overflow: hidden，否则会截断延展内容；
- 若家族树层级极深（>10 层），建议配合 transform: scale() 或虚拟滚动优化渲染性能；
- 连接线（::before/::after）逻辑无需修改——max-content 仅影响布局宽度，不影响绝对定位的连线计算。
最终，你将获得一个可平滑左右拖拽、节点清晰不重叠、支持任意规模数据的响应式家族树。将上述 CSS 应用于原始 CodePen 示例，即可立即解决“名字堆叠”问题，让百年家族脉络一目了然。
