如何实现Flex布局的两个并排div背景满宽，内容局限于容器？

没问题，这是个很常见的布局需求，我帮你把代码补全并解释清楚：

完整代码实现 #

<div class="flex-grid">
  <div class="flex-child">
    <p class="flex-child__content">content goes here</p>
  </div>
  <div class="flex-child">
    <p class="flex-child__content">content goes here</p>
  </div>
</div>

/* 外层Flex容器 */
.flex-grid {
  display: flex;
  width: 100%; /* 确保容器占满整个视口宽度 */
}

/* 每个Flex子项 */
.flex-child {
  flex: 1; /* 让两个子项自动平分可用宽度 */
  background: #f5f5f5; /* 示例背景色，方便看效果 */
  padding: 3rem 0; /* 上下内边距，避免内容贴紧边缘 */
}

/* 内容约束容器 */
.flex-child__content {
  max-width: 1200px; /* 内容的最大宽度，根据需求调整 */
  margin: 0 auto; /* 让内容在子项中水平居中 */
  padding: 0 1.5rem; /* 小屏幕下的左右留白，提升可读性 */
}

关键配置解释 #

• flex: 1：这是实现两个子项平分宽度的核心，它相当于flex-grow: 1; flex-shrink: 1; flex-basis: 0%;，确保每个子项会自动填充剩余空间，背景自然就撑满了各自的横向区域。
• max-width + margin: 0 auto：组合起来让内容被限制在指定宽度内，同时在父元素的背景区域中居中显示，完美实现“背景满宽，内容约束”的效果。
• 上下内边距和左右留白：是为了提升视觉体验，避免内容和边缘过于紧凑，你可以根据自己的设计需求调整数值。

如果需要给两个子项设置不同的背景色，直接给.flex-child加额外类或者单独设置样式就行，比如：

.flex-child:first-child {
  background: #e8f4f8;
}
.flex-child:last-child {
  background: #f8f4e8;
}

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