为什么嵌套Flexbox容器无法撑满父元素的全部宽度？

核心区分：元素的双重布局身份 #

多数flex布局的认知误区，都源于没有分清元素同时承担的两套独立布局角色：

• 作为布局容器的角色：决定它内部的子元素如何排列、尺寸如何计算，由它自身设置的display等容器属性决定
• 作为父级子项的角色：决定它在自己的父容器里占用多大空间，由父容器的布局规则决定
  这两套规则是互相独立、互不影响的。

对应示例代码中的两个元素：

1. 外层黄色背景div
   它的容器角色是flex容器，内部子元素按flex规则排列；但它的父级是普通文档流（如默认body容器），作为普通块级元素，遵守块级元素的默认宽度规则——自动占满包含块的全部可用横向宽度，这个表现和它自身是不是flex容器没有关系。
2. 内层浅蓝色背景div
   它的容器角色是flex容器，内部子元素会按flex规则排列；但它的父级是外层的flex容器，作为外层容器的直接子元素，它的宽度计算不再遵守普通块级元素的规则，而是切换为flex item的专属计算逻辑，这就是它没有自动撑满父容器宽度的根本原因。

很多人对"flex容器会自动撑满父级宽度"的误解，就是忽略了规则生效的前提：只有当flex容器本身处于普通块级文档流中、不是任何其他flex容器的直接子项时，它才会继承块级元素默认撑满宽度的特性；一旦它成为某个flex容器的子项，它的尺寸计算就会完全切换为flex item的规则，原本的块级默认宽高表现就失效了。

Flex item的默认尺寸规则 #

当元素成为flex容器的直接子项时，会自动应用默认的flex属性值flex: 0 1 auto，三个参数的含义直接决定了它的默认宽度表现：

• flex-grow: 0：默认状态下，该flex item不会主动拉伸，去占用父容器主轴方向的剩余空闲空间
• flex-shrink: 1：当父容器空间不足时，该item可以按比例收缩适应空间
• flex-basis: auto：计算item的初始尺寸时，会以item自身内容的实际宽度为基础，不会默认铺满父容器

这就解释了内层flex容器没有自动撑满的核心逻辑：它作为flex item的默认尺寸，是跟随自身内容宽度走的，没有被赋予拉伸占满剩余空间的权限。

对应flex: 1修复的原理 #

大家熟知的设置flex:1解决宽度适配的方案，本质是把flex item的默认值改为flex: 1 1 0%：

• 把flex-grow从默认的0调整为1，给了该item拉伸的权限，允许它占满父容器在主轴方向的全部剩余空间，最终实现撑满父容器宽度的效果。

内容的提问来源于stack exchange，提问作者me.at.coding