Flexbox子元素未占满容器宽度问题咨询及代码示例

嘿，这个问题我之前也踩过坑，咱们慢慢捋清楚～

问题根源 #

你以为的“未指定宽度就平分空间”其实是有前提的——Flexbox子元素默认的flex-grow属性值是0，这意味着它们只会贴合自身内容的宽度展示，不会主动去抢占容器的剩余空白空间。所以你的代码里，#left和#right只会包裹住“left”“right”文本的宽度，自然没法撑满父容器。

先贴出你的原始代码方便对照：

CSS代码

body { margin: 0; }
#parent { width: 100vw; height: 100vh; display: flex; }
#left { background: blue; height: 100%; }
#right { background: purple; height: 100%; }

HTML代码

<div id="parent">
  <div id="left">left</div>
  <div id="right">right</div>
</div>

解决方法 #

给两个子元素加上flex: 1属性就搞定了。flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%;的缩写，拆解一下它的作用：

• flex-grow:1：允许子元素瓜分容器的剩余空间，多个子元素会按设置的数值比例分配（这里两个都是1，所以平分空间）
• flex-shrink:1：当容器空间不足时，子元素可以自动缩小
• flex-basis:0%：把元素的基准宽度设为0，让flex-grow的比例计算完全基于容器剩余空间，而不是元素自身内容宽度

修改后的CSS代码：

body { margin: 0; }
#parent { width: 100vw; height: 100vh; display: flex; }
#left { background: blue; height: 100%; flex: 1; }
#right { background: purple; height: 100%; flex: 1; }

如果想要两个子元素占比不同，比如左边占1份、右边占2份，只需要把对应的flex值改成不同数字就行：

#left { flex: 1; }
#right { flex: 2; }

这样就能完美实现你想要的“填满容器”效果啦～

内容的提问来源于stack exchange，提问作者inhwrbp