Flexbox容器未占满全屏宽度的原因排查求助

嘿，这个问题其实挺常见的，我来给你拆解一下核心原因和解决办法～

问题根源 #

你当前的Flex容器没占满全屏，主要是两个默认样式在搞鬼：

1. 浏览器默认的body边距：大多数浏览器会给body元素默认设置margin: 8px，这会让body的可用宽度比屏幕窄16px（左右各8px），你的Flex容器作为body的子元素，自然也无法触达屏幕边缘。
2. Flex容器的宽度逻辑误解：虽然display: flex的元素是块级容器，默认会填充父容器的可用宽度，但如果父容器（这里是body）本身因为默认边距没有占满全屏，容器也就跟着“缩水”了。

解决方法 #

只需要两步就能搞定：

1. 重置html和body的默认边距、内边距，让它们彻底占满屏幕；
2. 显式给Flex容器设置width: 100%（其实默认auto也能生效，但显式设置更稳妥，避免父容器有其他样式干扰）。

修改后的完整代码如下：

CSS代码

/* 重置全局默认样式，消除浏览器自带的边距 */
html, body {
  margin: 0;
  padding: 0;
}

.masonry_container { 
  display: flex; 
  width: 100%; /* 让容器占满父元素的全部宽度 */
}

.masonry_left_col { border: 1px solid grey; }
.masonry_right_col { border: 1px solid grey; }

HTML代码（无需修改）

<div class="masonry_container">
  <div class="masonry_left_col"> Content </div>
  <div class="masonry_right_col"> Content </div>
</div>

额外优化（可选） #

如果你想让左右两列自动平分屏幕宽度，可以给子元素加上flex: 1属性，这样它们会自动填充容器的剩余空间：

.masonry_left_col, .masonry_right_col {
  border: 1px solid grey;
  flex: 1; /* 平分容器宽度 */
}

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