当家族树节点名称过长或分支过多时，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”）及子
- 的整体跨度动态伸展；
- 父级
- 因子元素不再“收缩”，能完整承载所有分支，避免层级塌陷；
- 整棵树形成一条逻辑连续的横向流，而非被强行折行。
配套容器设置（确保可滚动）
