当对 display: flex 的 设置 overflow: auto 时，其子元素（如 .list-id）的显式宽度（如 220px）可能被忽略或大幅压缩，根本原因是 Flex 布局下主轴尺寸优先级高于固定宽高，需通过 flex-basis、min-width 或结构重构来保障尺寸稳定性。
当对 `display: flex` 的 `
- ` 设置 `overflow: auto` 时，其子元素（如 `.list-id`）的显式宽度（如 `220px`）可能被忽略或大幅压缩，根本原因是 Flex 布局下主轴尺寸优先级高于固定宽高，需通过 `flex-basis`、`min-width` 或结构重构来保障尺寸稳定性。
-
display: flex+flex-direction: row（主轴为水平方向） -
overflow: auto（触发 BFC，但不改变 Flex 计算逻辑） -
width: max-content（覆盖了之前的400px !important，使容器宽度由内容决定）
在 Flex 布局中，一旦容器设置为 display: flex，其子元素（Flex 项目）将遵循 Flex 格式化规则：显式声明的 width 不再是绝对生效的约束，而是作为初始主轴尺寸参考（即 flex-basis），实际渲染受 flex-shrink、flex-grow 及容器剩余空间共同影响。你遇到的 .list-id 宽度从预期 220px 骤降至 71.391px，正是由于父容器 .list 同时具备以下特性：
此时，.list-id 作为第一个 Flex 项目，在无明确 flex-shrink: 0 或 min-width 保护下，会被强制压缩以适应其他兄弟元素（如嵌套的 .featured-products 列表）——而后者本身是非法嵌套（<ul></ul> 内直接嵌套 <ul></ul> 违反 HTML 规范，且未设 display: contents 或包裹层），进一步扰乱布局流。
✅ 推荐解决方案（按优先级排序）：
1. 为 .list-id 显式锁定最小宽度与收缩行为
.list-id {
flex: 0 0 220px; /* 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 220px; */
min-width: 220px; /* 双重保险 */
height: 100%;
padding: 30px 0 0 30px;
box-sizing: border-box;
}
✅
flex: 0 0 220px是关键：禁止伸缩（0 0），并指定基础尺寸为220px，确保宽度不被 Flex 算法压缩。
2. 修正 HTML 结构，避免非法嵌套
-
Products
Lorem Ipsum is simply dummy text...
-
并补充样式：
.featured-products-wrapper {
flex: 1; /* 占据剩余空间 */
height: 100%;
overflow-x: auto; /* 滚动仅作用于产品区 */
white-space: nowrap;
}
.featured-products {
display: inline-flex; /* 避免块级换行 */
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
⚠️ 注意事项：
- 删除
.list { width: max-content }—— 它会迫使容器宽度紧贴所有子项总和，加剧压缩；若需横向滚动，应让容器保持width: 400px并对内容区单独设overflow: auto。 - 避免在
<ul></ul>中直接嵌套<ul></ul>：HTML 规范要求<ul></ul>的直接子元素只能是<li>；否则解析器可能自动闭合外层列表，导致 DOM 结构错乱。 - 若需保留“侧边栏+滚动内容区”布局，更健壮的方式是用语义化结构：
<div class="list-container"> <aside class="list-id">...</aside><div class="featured-products-scroll"> <ul class="featured-products">...</ul> </div> </div>
通过 flex-basis 锁定尺寸 + 合理 HTML 结构 + 移除冲突的 width: max-content，即可彻底解决列表项宽度塌陷问题，确保设计意图精准还原。
