当家族树节点名称过长或分支过多时，css 浮动布局会导致子节点重叠或错位；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配最长子内容，并结合容器溢出控制实现水平滚动。
在构建大型家族树（Family Tree）可视化时，一个常见痛点是：随着代际加深和旁系分支增多，节点文字变长、层级变宽，而默认的浮动（float: left）布局无法动态适应内容宽度，导致右侧分支被挤压到左侧节点下方，视觉上严重重叠、结构混乱。
根本原因在于：原 CSS 中 .tree li 未设定明确宽度，浏览器按“收缩包裹”（shrink-to-fit）规则计算宽度，但浮动元素在无宽度约束时会尝试填满父容器可用空间，最终因换行与定位逻辑冲突而错位。
✅ 解决方案：使用 width: max-content
该 CSS 值指示元素宽度应等于其内部内容的最大固有宽度（例如最长一行文本或最宽子元素），且禁止自动换行——这正是家族树所需的“刚性延展”行为：
.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;
}⚠️ 注意事项与增强建议：
- max-content 在现代浏览器（Chrome 66+、Firefox 61+、Safari 14.1+、Edge 79+）中已广泛支持；如需兼容旧版 IE，可考虑 display: inline-block + white-space: nowrap 替代方案，但语义与维护性略低。
- 仅加 width: max-content 不足以实现滚动——还需为外层容器（如 .tree）添加 overflow-x: auto 和 white-space: nowrap（若嵌套内联元素），并确保其具有明确宽度限制（如 width: 100vw 或固定值）：
.tree { overflow-x: auto; padding: 10px; border: 1px solid #eee; } .tree > ul { display: inline-block; /* 防止 ul 自动撑满父容器 */ } - 若家族树深度极大，建议配合 transform: scale() 或虚拟滚动优化渲染性能，避免 DOM 节点过多导致卡顿。
最终效果：家族树将沿 X 轴线性展开，超出视口部分可通过鼠标拖拽或滚动条浏览，所有分支保持清晰对齐、无重叠，真正实现“一图览全族”的交互体验。
