移动端CSS Flex容器元素重叠问题求助

问题原因 #

你的CSS中#NewsSection和#NewsTeller都设置了固定的height:100vh，这会强制容器高度等于当前视口高度。当移动端设备上<p>元素内容较多时，内容总高度超过容器的固定高度，就会出现元素重叠、内容溢出的情况。

修复方案 #

1. 移除固定高度，让容器自适应内容
   • 给#NewsSection设置min-height:100vh，保证容器至少占满视口高度，内容增多时自动延伸
   • 移除#NewsTeller的height:100vh，改用min-height: fit-content让卡片根据内部内容自动调整高度
2. 给新闻卡片添加内边距
   避免内容紧贴容器边缘，提升移动端阅读体验
3. 移动端适配字体大小
   通过媒体查询缩小移动端的字体，防止文字过大导致溢出

修改后的CSS代码示例 #

a {
   color: currentColor;
   text-decoration: grey;
   font-family: 'Cairo', sans-serif;
}

#NewsSection {
  width: 100vw;
  min-height: 100vh; /* 替换固定height为min-height */
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  gap: 2rem; /* 添加间距，避免新闻卡片紧挨 */
}

#NewsTeller {
  width: 90vw; /* 稍微缩小宽度，避免贴边 */
  min-height: fit-content; /* 移除固定height，改用自适应高度 */
  display: flex; /* 明确设置为flex容器，确保内部元素布局正常 */
  flex-direction: column;
  align-items: center;
  padding: 1rem; /* 添加内边距 */
  color: white;
}

/* 移动端字体适配 */
@media (max-width: 768px) {
  body {
    font-size: 12pt;
  }
}

额外提示 #

• 动态生成NewsTeller元素时，确保每个元素的结构完整，避免嵌套错误导致布局异常
• 如果图片尺寸过大，可给图片设置max-width:100%，防止超出容器宽度

内容的提问来源于stack exchange，提问作者Khaled-The-Dev