当家族树分支过多、姓名过长时，传统浮动布局会导致节点重叠或错位；通过为 `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;
}
✅ 效果说明：
