Flexbox外侧下方带负margin的div背景色不显示如何解决

问题结论 #

Flexbox完全可以实现该需求，你遇到的背景无法显示的问题和Flexbox本身无关，是两个常规CSS布局问题叠加导致的。

问题根因 #

1. 布局差异错觉：你注释掉flex-row类时，两个.mf6元素的flex属性失效，变成普通块级元素上下堆叠，此时.parent高度为16em + 16em = 32em，.negative的-4em上负margin实际作用在32em的高度基准上，位置已经落在.parent范围外，和body默认白色背景叠加导致你误以为背景显示正常；而开启flex布局时，两个.mf6并排排列，.parent高度只有16em，.negative实际是伸入了.parent的区域内。
2. 外边距塌陷：.negative的子元素h1默认带有上下外边距，而.negative本身没有设置内边距、边框，也没有触发BFC，导致子元素的上外边距和父元素的上负margin发生塌陷，最终.negative的白色背景区域没有覆盖到h1文字上方的位置，看起来就像背景消失了。

解决方案 #

任选以下一种修改方案即可实现需求：

方案1：阻止margin塌陷+保证层级 #

修改.negative的CSS规则：

.negative {
  margin-top: -4em;
  margin-left: 3em;
  background-color: white;
  display: flow-root; /* 触发BFC，阻止margin塌陷，也可以替换为padding-top:1px、overflow:auto等规则 */
  position: relative; /* 保证元素层级高于前面的flex容器，避免被覆盖 */
}

方案2：清除h1默认边距 #

直接移除h1的默认外边距即可解决塌陷问题：

.negative h1 {
  margin: 0;
}

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