flex容器的::before伪元素脱离文档流问题求助

兄弟，我来帮你捋捋这个问题！你遇到的情况核心原因是：flex容器的::before和::after伪元素会被当作flex项参与布局，而你同时给.hero-section容器和它的伪元素都设置了height:100vh，再加上容器里的h1、p、button这些实际内容，总高度直接超过了100vh，自然就撑得容器超出视口了。而且你还给伪元素加了flex-shrink:0，这相当于告诉浏览器“这个元素绝对不能收缩”，进一步加剧了溢出的问题。

下面给你两种解决方案，按需选择：

方案一：用绝对定位把伪元素作为背景层（推荐） #

既然你想用伪元素做背景类的效果，完全没必要让它参与flex布局。给容器加个相对定位，再把伪元素绝对定位铺满整个容器，这样它就不会占据布局空间，也不会影响其他内容的展示：

* { margin: 0; padding: 0; box-sizing: border-box; }
header { position: absolute; }
.navbar img { width: 140px; }
.hero-section {
  background-image: url(assets/images/hero-section-bg-image.jpg);
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid orange;
  position: relative; /* 新增，让伪元素相对于容器定位 */
  z-index: 1; /* 确保内容在伪元素上方 */
}
.hero-section::before {
  border: 2px solid red;
  content: "something";
  background-color: black;
  /* 替换原height属性，用定位铺满容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 把伪元素放到内容下方 */
}
h1, p { color: white; opacity: 1; }

方案二：调整伪元素的flex属性让它自适应容器高度 #

如果你一定要用flex项的方式处理伪元素，可以去掉height:100vh，改用flex:1让它占据容器剩余空间，同时确保容器的高度被正确利用：

* { margin: 0; padding: 0; box-sizing: border-box; }
header { position: absolute; }
.navbar img { width: 140px; }
.hero-section {
  background-image: url(assets/images/hero-section-bg-image.jpg);
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 4px solid orange;
}
.hero-section::before {
  border: 2px solid red;
  content: "something";
  background-color: black;
  flex: 1; /* 让伪元素占满容器剩余高度 */
  width: 100%; /* 确保宽度铺满容器 */
  flex-shrink: 0;
}
h1, p { color: white; opacity: 1; }

不过这种方式下，伪元素会和其他内容一起瓜分容器高度，可能不是你想要的背景覆盖效果，所以更推荐第一种方案。

额外说明 #

你全局设置的* { margin:0; padding:0; box-sizing:border-box; }是没问题的，这个不是导致溢出的原因，核心问题就是伪元素作为flex项的高度设置和容器高度冲突了。

内容来源于stack exchange