调整浏览器大小时如何让.secDiv自动下移避免与.boxes内容重叠

问题原因 #

• 你为.boxes和.secDiv两个容器都设置了固定高度height: 300px
• 浏览器窗口缩小时，flex容器开启了flex-wrap: wrap，内部子元素会换行排列，子元素的总高度超过父容器的固定高度后，父容器不会自动适配高度，溢出的子元素就会和下方的.secDiv发生重叠

修复方案 #

只需要将两个容器的固定高度height: 300px替换为最小高度min-height: 300px即可，修改后完整CSS代码如下：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.boxes {
  position: relative;
  width: 100%;
  min-height: 300px; /* 原height改为min-height */
  border: 2px solid pink;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

.secDiv {
  position: relative;
  width: 100%;
  min-height: 300px; /* 原height改为min-height */
  border: 2px solid yellow;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.red2 {
  width: 300px;
  background-color: red;
  height: 150px;
  margin: 15px;
}
.green2 {
  width: 300px;
  background-color: green;
  height: 150px;
  margin: 15px;
}
.blue2 {
  width: 300px;
  background-color: blue;
  height: 150px;
  margin: 15px;
}

效果说明 #

修改后容器的最小高度为300px，当内部子元素换行总高度超过300px时，容器会自动向下撑开，下方的.secDiv也会同步向下移动，不会再出现重叠问题。

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