当家族树节点名称过长或分支过多时，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 标准中的关键关键字，它表示内容在不换行前提下所需的最小宽度。对家族树中的每个

Expanso json-flatten

通过 CLI 或 MCP 服务器，使用 Expanso Edge 管道扁平化嵌套 JSON 对象。

下载

应用该值，能确保：

• 每个节点及其子树连接线（::before/::after）严格依据内部 文本宽度展开；
• 子
  的定位（如 left: 50%）依然精准，因父
  • 宽度已真实反映内容体量；
  • 整棵树自然向右延展，不再被截断。

  ? 实施步骤：

  1. 修改 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;
  }

  2. 为 .tree 容器启用水平滚动（推荐）：

  .tree {
    overflow-x: auto;
    padding: 10px;
    border: 1px solid #eee;
  }

  ? 提示：overflow-x: auto 仅在内容实际超出容器宽度时显示滚动条，用户体验更友好；若需始终显示滚动条，可改用 overflow-x: scroll。

  3. （可选）增强可读性：为节点链接添加 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 构建可伸缩家谱的最佳实践之一。