当家族树节点名称过长或分支过深时，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; /* 可选：进一步强化根容器宽度自适应 */
}? 注意事项与优化建议
立即学习“前端免费学习笔记（深入）”；
- max-content 在现代浏览器（Chrome 66+、Firefox 61+、Safari 14.1+）中完全支持；若需兼容旧版 IE，可改用 display: inline-block + white-space: nowrap 组合模拟，但灵活性较低。
- 避免对 .tree li a 设置固定宽度（如 width: 100px），否则会截断长姓名；推荐使用 min-width 保底 + padding 控制内边距。
- 对于超大型家族树（>5 代 × >20 人），建议添加 transform: scale(0.9) 或响应式媒体查询，在小屏设备上缩小整体比例，提升可操作性。
- 连接线样式（.tree li::before/::after）依赖 50% 定位，max-content 不影响其计算逻辑，原有效果完整保留。
最终效果：家族树将根据实际内容宽度自动伸展，超出视口部分可通过鼠标拖拽或滚动条浏览，所有分支清晰分离、连线准确，真正实现“所见即所得”的可视化家谱表达。
