小屏幕尺寸下Div内文本溢出的通用适配方案求助

你的核心问题在于固定尺寸的容器和不合理的flex对齐逻辑，导致小屏幕下内容没有足够空间展示：

• .container和.container2设置了固定width:1200px和height:450px，小屏幕（如1280px宽）下容器宽度超过屏幕可用空间，文本自然溢出
• align-items: center会让内容垂直居中，但不会让容器高度自适应内容，一旦文本高度超过容器固定高度就会溢出
• .head-container用flex-direction: row且未设置换行，两个1200px的容器在小屏幕下挤在一起，进一步压缩文本空间

以下是修改后的完整代码，核心是去掉固定尺寸、优化flex布局、添加响应式适配：

修改后的CSS #

/* 全局基础重置（避免默认样式干扰） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.head-container {
  display: flex;
  flex-wrap: wrap; /* 小屏幕下容器自动换行 */
  gap: 2rem; /* 容器间间距，替代原margin-left */
  padding: 2rem;
  margin-top: 12.5rem; /* 替代原top:200px的定位方式 */
}

/* 合并重复样式，减少冗余 */
.container {
  background-color: #F6E9DA;
  display: flex;
  flex-wrap: wrap; /* 图片和文本在小屏幕下自动堆叠 */
  gap: 1.5rem;
  max-width: 1200px; /* 限制最大宽度，不超过1200px */
  width: 100%; /* 自适应父容器宽度 */
  min-height: 450px; /* 保留最小高度，避免内容过少时容器过矮 */
  justify-content: center;
  align-items: flex-start; /* 内容顶部对齐，避免垂直居中导致溢出 */
  padding: 2rem;
  border-radius: 15px;
  transition: 250ms;
  scale: 0.9;
}

.description {
  flex: 1; /* 让文本容器自动占据剩余空间 */
  min-width: 300px; /* 小屏幕下文本容器最小宽度，保证可读性 */
}

.description p {
  font-family: "Poppins";
  font-size: 16px;
  color: #617569;
  line-height: 1.6; /* 增加行高，提升可读性 */
}

.description h2 {
  font-family: "Poppins";
  font-size: 26px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: #617569;
  margin-bottom: 1rem; /* 标题与文本的间距 */
}

.photo img {
  max-width: 100%; /* 图片自适应容器宽度，避免溢出 */
  height: auto; /* 保持图片比例 */
  border-radius: 8px; /* 可选优化，让图片更美观 */
}

/* 小屏幕专属优化 */
@media (max-width: 768px) {
  .description h2 {
    font-size: 22px; /* 缩小标题字号 */
  }
  .description p {
    font-size: 14px; /* 缩小正文字号 */
  }
}

修改后的HTML（简化冗余结构） #

<div class="head-container">
  <div class="container">
    <div class="photo">
      <img src="images/sampleFace.jpg" alt="人物照片">
    </div>
    <div class="description">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>

  <div class="container">
    <div class="photo">
      <img src="images/sampleFace2.jpg" alt="人物照片">
    </div>
    <div class="description">
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
      sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
      aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

关键修改说明 #

• 移除固定尺寸：用max-width+width:100%实现容器自适应屏幕，min-height保证基础展示高度
• 优化flex换行：给父容器和内容容器都添加flex-wrap:wrap，实现不同屏幕下的自动堆叠
• 调整对齐逻辑：把align-items:center改为flex-start，避免垂直居中导致内容溢出，同时允许容器高度自适应内容
• 样式复用：删除冗余的.container2类，统一使用.container减少代码重复
• 图片自适应：给图片设置max-width:100%，避免图片溢出容器
• 小屏幕优化：通过媒体查询缩小字号，提升移动端可读性

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