百分比宽度在flex容器中失效是因为flex项默认忽略width百分比，由flex-basis和剩余空间决定尺寸；需用flex: 0 0 50%显式设定flex-basis才能生效，且该百分比基于容器主轴尺寸。
百分比宽度在 Flex 容器里为什么失效了
因为 flex 项的默认行为是「忽略父容器设置的 width 百分比」，转而由 flex-basis 和剩余空间共同决定实际尺寸。这不是 bug，而是弹性盒子的设计逻辑：它优先按 flex 分配规则重算尺寸，而不是继承传统盒模型的 width 计算流。
常见错误现象：div { width: 50%; } 写在 display: flex 的子元素上，但实际宽度既不是 50%，也不随父容器缩放；甚至出现溢出或收缩到内容宽。
- 如果真要强制按百分比占位，得显式覆盖
flex的默认伸缩行为：flex: 0 0 50%;（等价于flex-grow: 0; flex-shrink: 0; flex-basis: 50%;） -
flex-basis设为50%才真正触发百分比解析，且该百分比是相对于 flex 容器的主轴尺寸（比如flex-direction: row时，相对于容器的width） - 别混用
width和flex-basis：当flex-basis不为auto时，width声明会被忽略（浏览器 DevTools 里能看到 strike-through）
Flex 子项的 width: 100% 到底以谁为基准
在 flex 容器中，width: 100% 的计算基准仍是其**包含块（containing block）**——也就是 flex 容器本身，这点没变。但问题在于：flex 容器的宽度可能被自身 flex 行为压缩/拉伸，导致子项的 100% 失去预期意义。
使用场景：你希望某个 flex 子项填满整行（比如导航栏中的 logo 区），但又不想它参与 flex 分配。
立即学习“前端免费学习笔记（深入）”；
- 直接写
width: 100%很可能无效，尤其当容器有flex-wrap: wrap或其他子项存在时 - 更可靠的做法是脱离 flex 分配流：
flex: 0 0 100%;或align-self: stretch;配合width: 100%（仅当父容器主轴为 row 且未设flex-wrap） - 注意兼容性：老版 Safari 对
flex-basis: 100%解析不稳定，建议加min-width: 0;防止内容撑开
flex-grow 1 和 width: 100% 混用会怎样
会冲突。一旦设置了 flex-grow: 1，浏览器就进入“按剩余空间分配”模式，此时 width 声明基本被无视——除非你同时锁死 flex-shrink 和 flex-basis。
典型错误现象：两个子项都设了 flex-grow: 1，其中一个还写了 width: 300px，结果两者均分容器，300px 完全不生效。
- 想让某项「至少」占 300px，同时又能弹性增长：用
flex: 1 1 300px; - 想让它「固定」300px，不伸缩：用
flex: 0 0 300px;，这时width可删 - 别对同一元素同时写
flex: 1和width: 50%——后者不会起作用，还会增加维护负担
用百分比做响应式 flex 布局时最易忽略的一点
flex 容器自身的 width 是否真正响应。很多人只调子项的 flex-basis 百分比，却忘了容器本身可能被写死成 width: 1200px，或者没给它设 max-width / width: 100%，导致整个 flex 布局卡在固定宽度里动不了。
另一个隐藏坑：flex-basis 的百分比在嵌套 flex 中会逐层参考上级 flex 容器的主轴尺寸，而不是视口。所以多层嵌套后，50% 可能变成“父容器宽度的 50% 的 50%”，而不是你想要的视口 50%。
- 检查容器链：从最外层开始，确保每一级 flex 容器都有合适的
width或max-width设置 - 避免深层嵌套 flex 布局做百分比控制；如需精确视口比例，改用
calc()或 CSS 自定义属性 +vw更直接 - 调试时打开浏览器的 Layout 面板，看实际 computed
flex-basis值是多少——很多时候你以为是 50%，其实被解析成了 0px 或 auto
