Flexbox容器扩展未向下推挤下方Div的问题排查

看起来你的问题出在固定高度的文本容器和flex布局的对齐方式上，导致文本溢出时容器无法正确撑开，进而和下方元素重叠。咱们一步步来解决：

核心问题点 #

1. .squared_content_texts_container设置了固定的height:145px，当文本内容超过这个高度时，容器本身不会自动扩展，溢出的文本会跑到下方元素的区域里。
2. 存在拼写错误：oveflow:hidden应该是overflow:hidden（如果要让容器随文本撑开，这个属性反而会截断文本，暂时可以调整）。
3. .squared_contents_container的align-items:center会让子元素在垂直方向居中，当某个子元素高度变大时，容易和其他元素的布局冲突，导致视觉上的重叠。

修改后的CSS代码 #

body{
  display:flex; 
  flex-direction:column; 
  height:auto; 
  font-family:Roboto Slab; 
  position:relative; 
  scroll-behaviour:smooth;
} 
*{
  box-sizing:border-box; 
  margin:0; 
  padding:0;
} 
a{
  text-decoration:none;
} 
.squared_maincontainer{
  width:100%; 
  height:auto; 
  display:flex; 
  flex-direction:column;
} 
.squared_title{
  width:100%; 
  height:100px; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  font-size:37px; 
  font-weight:500; 
  color:rgba(0,0,0,0.8);
} 
/* 修改align-items为flex-start，让子元素从顶部开始排列 */
.squared_contents_container{
  width:100%; 
  height:auto; 
  display:flex; 
  align-items:flex-start; 
  justify-content:space-between; 
  flex-wrap:wrap;
} 
.squared_content_container{
  width:32%; 
  height:auto; 
  display:flex; 
  flex-direction:column; 
  margin:10px 0px;
} 
.squared_content_image{
  width:100%; 
  height:260px; 
  outline:1px solid rgba(0, 0, 0, 0.3); 
  background-repeat:no-repeat; 
  background-size:cover;
} 
/* 把固定height改成min-height，让容器能随文本扩展 */
.squared_content_texts_container{
  width:100%; 
  min-height:145px; 
  display:flex; 
  flex-direction:column; 
  padding:10px; 
  position:relative;
} 
.squared_content_texts_title{
  width:100%; 
  font-weight:500; 
  font-size:17px; 
  color:var(--main_color); 
  margin-bottom:10px;
} 
.squared_content_texts_description{
  width:100%; 
  height:auto; 
  font-weight:500; 
  overflow:hidden; /* 修正拼写错误 */
  font-size:14px; 
  color:rgba(0, 0, 0, 0.9); 
  margin-bottom:10px;
} 
.squared_content_texts_link{
  width:100%; 
  font-size:14px; 
  color:var(--main_color); 
  font-weight:400; 
  text-align:right; 
  margin-top:auto; /* 修正拼写错误marin→margin */
} 
.menu_maincontainer{
  width:100%; 
  height:auto; 
  display:flex; 
  flex-direction:column;
} 
.menu_title{
  width:100%; 
  height:100px; 
  display:flex; 
  justify-content:center; 
  align-items:center; 
  font-size:37px; 
  font-weight:500; 
  color:rgba(0,0,0,0.8);
} 
.menu_contents_container{
  width:100%; 
  height:auto; 
  display:flex; 
  justify-content:space-around; 
  flex-wrap:wrap;
} 
.menu_content_image_container{
  width:32%; 
  height:280px; 
  box-shadow:3px 3px 3px rgba(0,0,0,0.1); 
  background-size:cover; 
  position:relative; 
} 
.menu_content_texts_container{
  width:100%; 
  height:auto; 
  position:absolute; 
  bottom:0px; 
  left:0px; 
  background-color:rgba(0,0,0,0.7); 
  display:flex; 
  flex-direction:column; 
  padding:10px;
} 
.menu_content_texts_title{
  font-size:18px; 
  font-weight:400; 
  color:var(--main_color);
} 
.menu_content_texts_description{
  font-size:15px; 
  font-weight:400; 
  color:white;
}

关键修改说明 #

• min-height:145px替代height:145px：文本容器在内容较少时保持145px的高度，内容过多时会自动向下扩展，带动父容器.squared_content_container一起撑开，自然就不会和下方元素重叠了。
• align-items:flex-start替代align-items:center：确保每个内容卡片从顶部开始排列，避免因某个卡片高度变化导致的垂直居中错位。
• 修正两处拼写错误：oveflow→overflow，marin→margin，这些小错误也可能影响布局效果。

这样修改后，你的flex布局就能正确响应文本长度的变化，容器会自动扩展并推挤下方元素，不会再出现重叠问题啦～

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