CSS Grid下子Div超出父容器问题排查（含容器查询）

问题描述 #

我正在设计个人静态网页，只有少量HTML和CSS实操经验。为适配移动端/桌面端，我采用容器查询处理字体大小，使用相对单位。已实现铺满视口的首页基础布局，但窗口尺寸较小时（例如500x403），子div会超出视口范围，尺寸稍大时（如513x421）该问题消失。

原始代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="pt-BR">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,
     initial-scale=1">
  <title>My Pretty Site</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header class="homepage-header">
    <div class="homepage-header-box">
      <h1>My pretty awesome text</h1>
      <p>And that other amazing text that I produced for you guys</p>
    </div>
  </header>
</body>

</html>

CSS代码 #

@font-face {
  font-family: "Fredericka the Great";
  src: url("./Fonts/FrederickatheGreat-Regular.ttf");
  src: url("./Fonts/FrederickatheGreat-Regular.ttf") format("truetype");
}

/* Futura Medium */
@font-face {
  font-family: "Futura Medium";
  src: url("./Fonts/FuturaStd-Medium.otf");
  src: url("./Fonts/FuturaStd-Medium.otf") format("opentype");
}

/* Adjust raw configurations */
body {
  margin: 0;
  padding: 0;
  background: blanchedalmond;
}

/* Homepage header configuration */
.homepage-header {
  container-type: inline-size;
  width: 100vw;
  height: 100vh;
}

.homepage-header-box {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.homepage-header-box h1 {
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-family: "Fredericka the Great", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

.homepage-header-box p {
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-family: "Futura Medium", sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

/* Homepage header font size handling */
@container (width > 720px) {
  .homepage-header-box h1 {
    font-size: 7vw;
  }

  .homepage-header-box p {
    font-size: 2.25vw;
  }
}

@container (width <=720px) {
  .homepage-header-box h1 {
    font-size: 18vw;
  }

  .homepage-header-box p {
    font-size: 6vw;
  }
}

问题定位 #

• 视口单位与容器查询冲突：.homepage-header使用width:100vw，但vw是视口宽度，容器查询的宽度基于该元素本身，小窗口下大字体（18vw/6vw）会让内容总高度超出视口，而align-content:center会让内容居中，导致上下部分溢出视口。
• 无溢出控制：.homepage-header-box设置overflow:visible，超出容器的内容直接显示在视口外。
• 长文本未强制换行：小宽度下长文本无法自动换行，进一步增加内容高度。

修复方案 #

修改后的CSS代码 #

@font-face {
  font-family: "Fredericka the Great";
  src: url("./Fonts/FrederickatheGreat-Regular.ttf");
  src: url("./Fonts/FrederickatheGreat-Regular.ttf") format("truetype");
}

/* Futura Medium */
@font-face {
  font-family: "Futura Medium";
  src: url("./Fonts/FuturaStd-Medium.otf");
  src: url("./Fonts/FuturaStd-Medium.otf") format("opentype");
}

/* Adjust raw configurations */
body {
  margin: 0;
  padding: 0;
  background: blanchedalmond;
}

/* Homepage header configuration */
.homepage-header {
  container-type: inline-size;
  width: 100%; /* 替换100vw为100%，避免视口单位的滚动条问题 */
  height: 100vh;
  overflow: auto; /* 内容超出时显示滚动条 */
}

.homepage-header-box {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  overflow: auto; /* 替换visible为auto，控制内部内容溢出 */
  padding: 1rem; /* 添加内边距，避免文本贴边 */
  box-sizing: border-box; /* 内边距计入元素总宽度 */
}

.homepage-header-box h1 {
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-family: "Fredericka the Great", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  max-width: 100%; /* 限制文本宽度不超出容器 */
  word-wrap: break-word; /* 强制长文本换行 */
}

.homepage-header-box p {
  margin: 0;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-family: "Futura Medium", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  max-width: 100%; /* 限制文本宽度不超出容器 */
  word-wrap: break-word; /* 强制长文本换行 */
}

/* Homepage header font size handling */
@container (width > 720px) {
  .homepage-header-box h1 {
    font-size: 7vw;
  }

  .homepage-header-box p {
    font-size: 2.25vw;
  }
}

@container (width <=720px) {
  .homepage-header-box h1 {
    font-size: 16vw; /* 适当减小字体，降低内容高度 */
  }

  .homepage-header-box p {
    font-size: 5vw; /* 适当减小字体，降低内容高度 */
  }
}

关键修改说明 #

1. width:100%替代100vw：让容器宽度继承父元素（body）的宽度，避免vw可能带来的横向滚动条，容器查询的宽度也更贴合可用空间。
2. 添加溢出控制：通过overflow:auto确保内容超出时用户可滚动查看，不会直接溢出视口外。
3. 文本换行与宽度限制：max-width:100%和word-wrap:break-word确保长文本不会超出容器宽度，强制换行避免横向溢出。
4. 内边距与盒模型：padding提升视觉体验，box-sizing:border-box确保内边距不会让容器宽度超出视口。
5. 微调字体大小：小屏幕下适当减小字体尺寸，降低内容总高度，减少溢出概率。

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