如何让多个独立div不受内容影响保持等高？

要实现左右容器高度自动匹配最高项，同时保证box1/box2始终在div1下方，只需调整Flex容器配置和.outerDiv的高度规则：

修改后的CSS代码 #

.outerDiv {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: darkblue;
  width: 400px;
  padding-top: 100px;
  padding-bottom: 106px;
  /* 让outerDiv高度自适应内容 */
  height: fit-content;
}

.box1 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  left: 0;
}

.box2 {
  position: absolute;
  background: orange;
  height: 100px;
  width: 100px;
  border: 3px darkblue solid;
  bottom: 0;
  right: 0;
}

.div1 {
  margin: 0 auto;
  background: white;
  width: 250px;
}

#divContainer {
  display: flex;
  /* 去掉换行，确保左右容器在同一行触发等高 */
  /* flex-wrap: wrap; */
}

#divContainer-left {
  flex: 50%;
  /* 让容器内部元素居中，同时确保高度被子元素撑开 */
  display: flex;
  justify-content: center;
}

#divContainer-right {
  flex: 50%;
  display: flex;
  justify-content: center;
}

关键调整说明 #

1. Flex默认等高特性：父容器#divContainer使用display: flex时，直接子元素会自动匹配最高项的高度。去掉flex-wrap: wrap保证两个容器始终在一行，触发该特性。
2. 自适应.outerDiv高度：给.outerDiv添加height: fit-content，让它的高度由内部div1的内容决定，保留padding-bottom来容纳绝对定位的box，避免内容被遮挡。
3. 子容器居中对齐：给左右容器添加display: flex; justify-content: center;，确保内部的.outerDiv水平居中，同时保证容器高度能完全被子元素撑开。

这样无论哪个容器内容更多，左右容器都会自动匹配最高高度，box1和box2也会始终固定在.outerDiv底部，满足布局要求。

内容的提问来源于stack exchange，提问作者nathan.friedman.designs