子元素宽度自适应失败主因是父容器未设display: flex；需确保父容器启用flex布局，并合理设置flex-direction；通过flex-basis定义子元素初始宽度，如200px、50%或auto；利用flex-grow控制剩余空间分配，0为不扩展，1及以上按比例均分；常见问题包括min-width限制、flex-shrink为0或父容器宽度未定义；例如固定宽与自适应并存时，可设一子项flex-basis: 200px、flex-grow: 0，另一子项flex-basis: 0、flex-grow: 1；正确组合flex-basis与flex-grow即可解决多数自适应问题。
子元素宽度自适应失败，通常是因为父容器未正确启用弹性布局，或子元素的伸缩属性设置不合理。使用 flex-basis 和 flex-grow 可以精准控制子元素在容器中的初始宽度和扩展行为，从而实现理想的自适应效果。
确保父容器启用了 Flex 布局
如果父元素没有设置 display: flex，那么所有与 flex 相关的属性都不会生效。
- 给父容器添加 display: flex;
- 根据需要设置 flex-direction（如 row 或 column）
理解 flex-basis 的作用
flex-basis 定义了子元素在主轴方向上的初始宽度，类似于 width 属性，但专用于 flex 布局中。
- 设置 flex-basis: 200px; 子项初始宽为 200px
- 设置 flex-basis: auto; 则按内容或 width 计算初始宽
- 设置百分比如 flex-basis: 50%; 表示占父容器主轴空间的一半
用 flex-grow 控制剩余空间分配
当容器有剩余空间时，flex-grow 决定子元素如何拉伸填充。
立即学习“前端免费学习笔记（深入）”；
- flex-grow: 0 表示不扩展，保持初始宽
- flex-grow: 1 表示可扩展，并与其他值为 1 的子项均分空间
- flex-grow: 2 的元素将获得双倍于 flex-grow: 1 元素的空间
常见问题与解决方案
有时候即使设置了 flex 属性，宽度依然“不自适应”，可能是以下原因：
- 子元素设置了 min-width: 0 外的最小宽度限制，导致无法压缩
- flex-shrink 被设为 0，阻止了收缩行为
- 父容器宽度本身未定义（比如未设 width 或处于浮动/绝对定位中）
例如，两个子元素希望一个固定宽度、一个自适应填充：
.parent {
display: flex;
}
.child-1 {
flex-basis: 200px;
flex-grow: 0;
}
.child-2 {
flex-basis: 0;
flex-grow: 1;
}
这样第一个元素保持 200px，第二个则自动填满剩余空间。
基本上就这些。合理搭配 flex-basis 和 flex-grow，就能解决大多数宽度自适应失败的问题。关键在于理解它们分别控制“起点”和“扩展能力”。
