HTML区块响应式高度适配问题求助：移动端文本溢出背景容器

Hey there! Let's tackle that text overflow issue you're seeing on iPhones—desktop looks great, but mobile is spilling out of the purple container? I know exactly what's going on here.

The Root Cause #

Looking at your CSS, the height: 100% on .section-with-personal-photo is the culprit. Here's why:

• height: 100% forces the container to match the height of its parent element, no matter how much content is inside it.
• On desktop, your content fits within that 100% height (and the min-height: 360px kicks in if needed). But on iPhones, text wraps more, making the content taller than the parent's 100% height—so it overflows.

The Fixes #

Try these adjustments to make the container adapt to its content on mobile:

1. Remove height: 100%
   Ditch the fixed height constraint so the container can grow with its content. Keep min-height: 360px to maintain your minimum desired height for shorter content.

2. Add box-sizing: border-box (optional but safe)
   This ensures any padding on child elements (like .section-with-personal-photo-image) doesn't add extra height/width to the container, preventing unexpected overflow.

Modified CSS Example #

.section-with-personal-photo {
  width: 100%;
  /* Remove height: 100% to let content dictate height */
  min-height: 360px;
  background-image: linear-gradient(126deg, rgb(92, 52, 116) 40%, rgb(142, 102, 206) 100%);
  box-sizing: border-box; /* Ensures padding/borders don't break dimensions */
}

.section-with-personal-photo-image {
  padding: /* Your existing padding values */;
  box-sizing: border-box; /* Match parent for consistent sizing */
}

Why This Works #

By removing height: 100%, you're letting the container's height be determined by its content. The min-height: 360px still ensures the section doesn't get too small when there's less text. On iPhones, the text wraps into more lines, and the container will automatically expand to fit it—no more overflow!

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