当家族树节点名称过长或分支过深时，css 默认布局会导致子节点重叠、错位；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配最长子内容，并配合容器 `overflow-x: auto` 实现水平滚动浏览。
在构建大型家族树（Family Tree）时，一个常见痛点是：随着代际增加和成员姓名变长，树形结构无法自然横向延展，反而出现节点堆叠、覆盖、错位等问题——尤其当左右两支家族规模差异较大时，右侧分支常被“挤”到左侧分支下方，破坏层级逻辑与可读性。
根本原因在于原始 CSS 中 .tree li 使用了 float: left 但未设定明确宽度约束，浏览器按默认行内块行为计算宽度，导致嵌套
- 的定位基准偏移，连接线（::before/::after）错位，最终整棵树“塌缩”成单列或局部重叠。
✅ 解决方案：启用 max-content 自适应宽度
只需在 .tree li 样式中添加一行：
.tree li {
width: max-content; /* 关键修复 */
float: left;
/* 其余原有样式保持不变 */
}
max-content 是 CSS 逻辑尺寸关键字，它指示元素宽度应恰好容纳其内部最长不可折行内容（如最长姓名链接），不主动换行、不压缩文本，从而确保每个节点及其后代都能获得足够的水平空间。这使整棵树能真实反映层级宽度需求，而非受限于视口或父容器。
⚠️ 配套必要设置（否则滚动无效）
仅加 max-content 不够——还需确保外层容器允许溢出并提供滚动能力：
.tree {
overflow-x: auto; /* 启用水平滚动条 */
padding: 10px;
border: 1px solid #eee;
}
.tree ul {
min-width: fit-content; /* 可选：进一步强化根容器宽度自适应 */
}
? 注意事项与优化建议
