flex子项宽高“失效”实为flex-basis和min-width:auto等默认规则覆盖了width/height——flex:1中flex-basis:0%优先级高于width，min-width:auto强制撑开内容宽度，需显式设min-width:0修复，且display类型、box-sizing及父容器高度链均影响最终表现。
不是宽高“失效”，而是被 flex-basis 和隐式 min-width: auto / min-height: auto 覆盖了计算逻辑——你写的 width 或 height 根本没参与主轴尺寸分配。
flex: 1 的默认行为直接绕过 width/height
flex: 1 是 flex-grow: 1、flex-shrink: 1、flex-basis: 0% 的简写。关键在 flex-basis: 0%：它让浏览器忽略你声明的 width 或 height，转而以 “0% 容器尺寸” 为起点拉伸或收缩。
- 即使写了
width: 200px，只要父容器是display: flex，且子项没显式设flex-basis，flex-basis: auto（或0%）就优先生效 -
flex-basis优先级高于width，所以开发者工具里看到的 “Computed width” 往往是计算后的结果，不是你写的值 - 若父容器宽度未确定（比如
display: inline-flex或浮动后未清除），flex-basis: 50%也会算错——百分比失去参照
min-width: auto 是真凶，不是 bug
浏览器给每个 flex 项目默认加了 min-width: auto（水平方向）和 min-height: auto（垂直方向）。这个 auto 不是“无限制”，而是强制元素至少撑开到内容固有宽度（比如长单词、图片原始宽）——你写的 min-width: 120px 就被压在下面，根本起不了作用。
- 表现就是：文字一长，盒子立刻变宽；空间一紧，又卡住不缩，像
width被无视 - 修复必须显式覆盖：
min-width: 0（水平）或min-height: 0（垂直），不能靠删flex: 1解决 - 对
button、input等原生控件，还要先加-webkit-appearance: none，否则内置最小尺寸会干扰min-width: 0
display 类型和 box-sizing 会叠加干扰
就算解决了 flex 行为，width 还可能因底层显示模式翻车：
-
display: inline元素（如<span></span>）天然无视width，哪怕它在 flex 容器里——得先改display: inline-block或block -
box-sizing: content-box（默认）下，width: 200px+padding: 10px= 实际占位 220px，容易误判“没生效” - 推荐全局加：
* { box-sizing: border-box; }，但注意别和已有calc()冲突
height: 100% 在 flex 容器里基本不可靠
给 flex 子项写 height: 100%，90% 情况下是白写——因为 flex 容器默认不把自身高度作为包含块，除非它自己有明确高度（px、vh），且所有父级（包括 html、body）都已设高。
- 更稳的替代：
flex: 1+min-height: 0（垂直方向）+ 内部内容设height: 100% - 若父容器是
flex-direction: column，子项要撑满高度，优先用flex: 1，而不是height: 100% - 检查开发者工具的 “Computed → height”，如果是
auto，说明上层高度链断了
真正麻烦的不是规则多，而是这些行为相互嵌套：flex-basis 压制 width，min-width: auto 卡住收缩，box-sizing 改变计算基准，display 类型彻底屏蔽设置——漏掉任意一层，width 就“看起来失效”。调试时，别只盯着子元素，得顺着 html → body → 父容器 → flex 容器 → 子项，一层层看 computed height/width 和 display 值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
