当家族树节点名称过长或分支过多时，css 默认布局会导致内容重叠或截断；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配最长子内容，并配合容器溢出处理实现水平 scrolling。
在构建大型家族树（Family Tree）可视化时，一个常见痛点是：随着代际增加和姓名长度变大，树形结构无法自然展开，导致兄弟节点堆叠、连线错乱、文字覆盖——尤其在左右分支不对称（如一侧成员名极长）时尤为明显。根本原因在于原始 CSS 中 li 使用了 float: left 但未设定合理宽度约束，浏览器按默认行内块行为压缩布局，使深层嵌套节点被迫换行或挤压。
解决方案核心：启用 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;
}max-content 是 CSS Sizing Level 3 中的内在尺寸关键字，它指示元素应取其内容（含文本、子元素等）在无换行前提下的自然最大宽度。对家族树而言，这意味着：
- 每个
- 将根据其内部 标签文本长度（如 "simon" vs "benjamin"）及子
- 的整体跨度动态伸展；
- 父级
- 因子元素不再“收缩”，能完整承载所有分支，避免层级塌陷；
- 整棵树形成一条逻辑连续的横向流，而非被强行折行。
配套容器设置（确保可滚动）
仅设置 max-content 不足——还需包裹容器支持水平溢出与滚动：
.tree {
overflow-x: auto; /* 启用水平滚动条 */
overflow-y: hidden; /* 隐藏垂直滚动（可选） */
white-space: nowrap; /* 防止内部文本意外换行 */
padding: 10px;
}
.tree ul {
display: inline-block; /* 让 ul 参与 inline 流，响应 max-content */
margin: 0;
padding-top: 20px;
position: relative;
}⚠️ 注意事项与优化建议：
- max-content 在现代浏览器（Chrome 66+、Firefox 61+、Edge 79+、Safari 14.1+）中完全支持；若需兼容旧版 IE，可考虑 display: table-cell + white-space: nowrap 替代方案，但灵活性较低。
- 避免对 .tree li a 设置固定宽度，否则会抵消 max-content 效果；推荐保持 display: inline-block 并依赖内边距控制呼吸感。
- 对于超深家族树（>6 代），建议结合 transform: scale() 或虚拟滚动（如 react-window）提升性能，防止 DOM 节点过多导致渲染卡顿。
- 若希望默认显示居中区域，可在初始化后通过 JavaScript 调用 element.scrollIntoView({ inline: 'center' })。
最终效果：家族树将沿 X 轴线性铺开，用户可通过鼠标拖拽或滚动条自由浏览全部分支，彻底解决名称重叠与布局坍缩问题——既保持语义化 HTML 结构，又无需引入复杂 JS 渲染库。
