当家族树节点名称过长或分支过多时，css 默认布局会导致子节点重叠或溢出；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配内容，再配合容器 `overflow-x: auto` 即可实现水平滚动浏览完整树形结构。
在构建大型家族树（Family Tree）时，一个常见痛点是：随着代际加深和旁系分支增多，节点文字长度差异大（如“Christopher-James-Williamson” vs “Tom”），而原生 CSS 浮动布局（float: left）会将所有
根本原因在于：默认情况下，
✅ 解决方案：使用 width: max-content
max-content 是 CSS Intrinsic Sizing 标准中的关键关键字，它表示内容在不换行前提下所需的最小宽度。对家族树中的每个
- 每个节点及其子树连接线（::before/::after）严格依据内部 文本宽度展开；
- 子
- 的定位（如 left: 50%）依然精准，因父
- 宽度已真实反映内容体量；
- 整棵树自然向右延展，不再被截断。
? 实施步骤：
- 修改 CSS 中 .tree li 规则，添加 width: max-content：
.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; }- 为 .tree 容器启用水平滚动（推荐）：
.tree { overflow-x: auto; padding: 10px; border: 1px solid #eee; }? 提示：overflow-x: auto 仅在内容实际超出容器宽度时显示滚动条，用户体验更友好；若需始终显示滚动条，可改用 overflow-x: scroll。
- （可选）增强可读性：为节点链接添加 white-space: nowrap 防止意外折行：
.tree li a { white-space: nowrap; /* 确保姓名不被截断换行 */ }⚠️ 注意事项：
- max-content 在现代浏览器（Chrome 66+、Firefox 61+、Edge 79+、Safari 14.1+）中完全支持；如需兼容旧版 IE，需降级为 JavaScript 动态计算宽度（不推荐，复杂度高且易出错）。
- 避免对 .tree ul 设置固定宽度或 overflow: hidden，否则会裁剪子树。
- 若家族树深度极大（>6 层），建议结合 transform: scale(0.9) 或响应式字体缩放（font-size: clamp(...)）优化可视密度。
✅ 最终效果：
家族树将根据最长姓名与最深嵌套自动向右延伸，用户可通过鼠标拖拽或滚动条完整浏览全部分支，左右两侧结构互不干扰，真正实现“所见即所得”的清晰族谱可视化。此方案轻量、标准、无 JS 依赖，是纯 CSS 构建可伸缩家谱的最佳实践之一。
