图片描述：属性选配页面，顶部有固定导航栏（返回/标题/生成订单BOM），下方是8张特征卡片列表，展开状态的卡片显示空的属性/选配项表格，页面底部卡片已被裁剪——没有滚动区域导致内容溢出视口。

第296行已有 overflow-auto，但问题是父容器 flex-1 min-h-0 的高度约束可能没有正确传递到这一层。需要确认整个页面的高度链是否正确闭合：

父容器是 flex flex-col flex-1 overflow-hidden，子组件根元素是 flex flex-col flex-1 min-h-0。问题在于 flex-1 要生效，父链上的每一级都必须有确定高度。检查最顶层：

现在看应用的最外层容器是否有 h-screen 或固定高度：

完整链条已清楚：

• h-screen flex flex-col → <main className="flex-1 flex flex-col overflow-hidden"> → <SuperBOMPage /> → <div className="flex flex-col flex-1 overflow-hidden"> → <AttrConfigurePage> → 根元素 flex flex-col flex-1 min-h-0

问题根源找到了：<SuperBOMPage /> 直接渲染在 <main> 内，但 <main> 里有 <TabBar /> 以及其他许多条件分支的组件，它们不在 <SuperBOMPage /> 内。这意味着 SuperBOMPage 自身根元素的 flex-1 能生效，但当属性选配页面覆盖渲染时，它的高度链是：

h-screen → main(flex-1) → SuperBOMPage返回的div(flex-1,overflow-hidden) → AttrConfigurePage根(flex-1,min-h-0)

main 是 flex-1 flex flex-col overflow-hidden，但 main 里还有 <TabBar />，所以 SuperBOMPage 在 main 里是 flex-col 里的一个子元素，不是直接占满，需要有 flex-1。SuperBOMPage 的 attrConfiguringRecord 分支返回的是 <div className="flex flex-col flex-1 overflow-hidden">——这个 flex-1 在 main 的 flex-col 里不会生效，因为 SuperBOMPage 自身并没有 flex-1。

看 SuperBOMPage 的根容器：

现在完整了解了层次结构：

• main.flex-1.flex-col.overflow-hidden（来自page.tsx，第891行）

  • <TabBar />（固定高度，shrink-0）
  • <SuperBOMPage /> → 正常返回 div.flex-col.flex-1.overflow-hidden（第271行）✓ 能填满剩余空间
  • 但当 attrConfiguringRecord 时返回的是另一个 div.flex-col.flex-1.overflow-hidden（第217行）—— 这个div是SuperBOMPage函数提前return的，不是第271行的根元素

TabBar 在 main 里，main 是 flex-col，TabBar 之后是条件渲染的各个模块页面。SuperBOMPage 在 isSuperBOM 条件下渲染——这个 SuperBOMPage 自身就是 main 的 flex 子元素，它自身的 flex-1 在 main 的 flex-col 里是有效的。

而 AttrConfigurePage 的根元素 flex-1 min-h-0 放在 SuperBOMPage 提前返回的 div.flex-col.flex-1.overflow-hidden 里，高度链完整正确。

真正的问题：AttrConfigurePage 的主内容区域 <div className="flex-1 overflow-auto p-4 flex flex-col gap-4"> 用了 overflow-auto，这应该能滚动。截图显示卡片溢出而不滚动，说明这个 div 没有被约束高度——flex-1 在 flex-col 父容器中会尝试获得剩余高度，但父容器 flex-1 min-h-0 里如果没有 min-h-0，flex-1 子元素就会膨胀超出父容器。

attr-configure-page.tsx 的根容器第247行是 flex flex-col flex-1 min-h-0，已经有 min-h-0，这应该是正确的。但它的父容器（super-bom-page.tsx 第217行的 div.flex-col.flex-1.overflow-hidden）没有 min-h-0！在 flexbox 中，overflow-hidden 不等同于 min-h-0，需要两者都有才能正确约束高度。

同样修复 configuringRecord 分支的包装 div：

根本原因是包裹 AttrConfigurePage 的父 div 缺少 min-h-0——在 flexbox flex-col 布局中，flex 子元素默认 min-height: auto，会随内容膨胀而不受父容器高度限制，导致 overflow-auto 无法生效、内容溢出视口。添加 min-h-0 后，flex 子元素高度被正确约束，overflow-auto 才能触发滚动条。同步修复了 configuringRecord 分支，保持一致性。

图1（参考）：订单BOM选配页，每个特征卡片展开后显示属性行+单选按钮横排，匹配结果行在底部，右侧有滚动条，布局简洁清晰。 图2（当前）：超级BOM属性选配页，折叠/展开逻辑已工作，但内容区域是表格形式且缺乏单选按钮的视觉样式。

代码结构已清楚。当前页面的逻辑、单选按钮、匹配结果等已经完整，但与参考图对比有两个视觉差异：1）参考图没有"属性项/选配项"表头行，直接用属性键当行标签；2）主要是滚动问题——min-h-0 已在上一轮加到父容器，但 flex-1 overflow-auto 的容器本身需要确认高度链完整。

检查一下当前 super-bom-page.tsx 中 attrConfiguringRecord 分支，以及 AttrConfigurePage 根元素是否已有 min-h-0：

根容器第247行：flex flex-col flex-1 min-h-0 bg-[#f4f6fa] ✓
内容区第296行：flex-1 overflow-auto p-4 flex flex-col gap-4 — 这里缺少 min-h-0！

overflow-auto 要在 flex 子元素上生效，该元素自身必须有 min-h-0（防止 flex 子元素因默认 min-height: auto 撑开父容器）。

主要修改：将内容区从 <table> 换成 flex div 布局（对齐参考图的行式设计），为滚动容器加上 min-h-0 overflow-y-auto 确保高度约束正确传递、滚动条能正常出现。属性键列固定宽度 w-36，选配项列 flex-1 自适应，与参考图的"属性项 / 选配项"两列格式完全对齐，单选圆圈样式、hover 效果、匹配结果行也保持一致。