在CSS弹性盒子模型中，不少初学者发现给子元素写上flex:1之后，它的实际渲染宽度并不是固定值，而是会随着外层容器大小、兄弟元素内容多少不断改变。要解释这种现象，必须回到flex属性的底层定义，看清它到底控制了哪些维度。
flex:1的真实含义
很多资料会简单说flex:1表示“占满剩余空间”，但严格来说，flex是flex-grow、flex-shrink、flex-basis三个属性的简写。当书写为flex:1时，浏览器实际解析为flex:1 1 0%。这里的三个值分别对应放大比例、缩小比例以及初始主轴基准尺寸。
其中flex-basis为0%是最关键的一点。它告诉浏览器：在计算分配之前，该子元素在主轴方向上的初始大小视为零，不参考其自身内容宽度。于是所有可用空间都成为“剩余空间”，再按照flex-grow的比例进行分配。由于flex-grow是1，若只有一个flex:1元素，它会吃下全部剩余空间；若有多个，则平分。
与flex:auto的区别
如果写成flex:auto，等价于flex:1 1 auto，此时flex-basis是auto，子元素会先按内容或显式宽度占据基础尺寸，然后再分配剩余空间。这就会导致内容多的盒子更宽，而flex:1由于基准为零，内容多少不影响初始分配，仅影响最小承载空间。
/* flex:1 的等价展开 */
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
/* flex:auto 的等价展开 */
.item-auto {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
宽度动态变化的触发条件
当容器宽度改变时，比如窗口缩放或父级从固定宽度变为百分比，弹性容器会重新计算主轴剩余空间。因为flex:1元素的基准是0%，所以它的宽度完全由“剩余空间 × 分配比例”决定，自然会随容器变宽而变宽，变窄而变窄。
另一个常见场景是兄弟节点内容长度不一。假设一个flex容器里有两个子元素，左侧是flex:1的文本块，右侧是固定宽度200px的图片。当左侧文本变多，由于其flex-shrink为1且基准为0%，在容器不宽裕时它会被压缩；若右侧图片变为300px，剩余空间减少，左侧flex:1宽度立刻变小。这种联动就是肉眼看到的“动态变化”。
缩小与放大的边界
flex-shrink默认是1，表示空间不足时允许收缩。但如果子元素内部有不可断行的内容（如长单词、固定尺寸控件），浏览器会保留其最小内容宽度，此时flex:1元素可能被迫溢出或被挤到下一行。反过来，flex-grow只在有剩余空间时生效，容器刚好塞满则宽度稳定。
<div class="container"> <div class="left">一段可变长度的文本</div> <div class="right">固定区域</div> </div>
.container {
display: flex;
width: 100%;
}
.left {
flex: 1; /* 动态宽度 */
}
.right {
width: 200px;
flex-shrink: 0; /* 不被压缩 */
}
如何主动控制宽度表现
如果希望flex:1元素在特定区间稳定，可配合min-width与max-width限制。例如设置min-width:120px能避免被压缩到不可读，设置max-width:400px能防止过度拉伸破坏视觉平衡。此外，将flex-basis改为具体像素，如flex:1 1 200px，可让元素先保有200px底子再分配剩余，适应性更强。
在嵌套flex场景中，动态变化还会跨层传递。内层容器的宽度依赖外层分配，若外层某个flex:1变窄，内层整体空间跟着缩小，内部flex:1子元素也会重算。因此排查宽度异常时，建议从最外层容器逐层检查flex相关属性，而不是只盯住最末级的盒子。
| 属性写法 | flex-grow | flex-shrink | flex-basis | 宽度行为 |
|---|---|---|---|---|
| flex:1 | 1 | 1 | 0% | 完全按剩余空间分配 |
| flex:auto | 1 | 1 | auto | 先内容后剩余 |
| flex:1 1 200px | 1 | 1 | 200px | 保底200px再分配 |
小结
flex:1带来的宽度动态变化并不是浏览器bug，而是弹性布局按规范工作的结果。抓住flex-basis为0%这一核心，就能明白为何它不认内容只认空间。在实战中结合min-width、max-width以及合理的flex-basis，便可使布局既灵活又可控。