当家族树节点名称过长或分支过多时，css 浮动布局会导致子节点重叠或错位；通过为 `li` 元素设置 `width: max-content`，可强制其宽度适配最长子内容，并结合容器溢出控制实现水平滚动。
在构建大型家族树（Family Tree）可视化时，一个常见痛点是：随着代际加深和旁系分支增多，节点文字变长、层级变宽，而默认的浮动（float: left）布局无法动态适应内容宽度，导致右侧分支被挤压到左侧节点下方，视觉上严重重叠、结构混乱。
根本原因在于：原 CSS 中 .tree li 未设定明确宽度，浏览器按“收缩包裹”（shrink-to-fit）规则计算宽度，但浮动元素在无宽度约束时会尝试填满父容器可用空间，最终因换行与定位逻辑冲突而错位。
✅ 解决方案：使用 width: max-content
该 CSS 值指示元素宽度应等于其内部内容的最大固有宽度（例如最长一行文本或最宽子元素），且禁止自动换行——这正是家族树所需的“刚性延展”行为：
