为何CSS Grid布局会允许文本溢出容器？

问题 #

我给文本设置了窄宽度，同时配置了word-break: break-word和hyphens: auto属性。正常流（normal flow）布局下，文本会自动换行并保持在容器边界内，符合预期；但使用CSS Grid布局时，文本会溢出容器，且断词位置也有所不同，请问这一现象的原因是什么？

代码示例 #

CSS代码

#wrapper {
  max-inline-size: 25ch;
  margin-inline: auto;
  word-wrap: break-word;
  hyphens: auto;
}

#grid,
#flow {
  padding: 1em;
  background-color: oldlace;
}

#flow {
  margin-block-start: 2em;
}

.tag {
  padding: 0.25em;
  background-color: azure;
  inline-size: min-content;
  font-family: monospace;
}

#grid {
  display: grid;
  gap: 1em;
}

HTML代码

<div id="wrapper">
  <div id="grid">
    <p class="tag">grid</p>
    <h2>This is a long headline with a verysuperlongtimeword</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat quam, vitae pretium tellus. Sed consequat tellus eu diam commodo, quis ultricies libero ultrices. Praesent nec ipsum venenatis, semper magna at, pretium tortor. Aliquam tempus lectus iaculis lacus pretium sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dictum, felis eu pulvinar scelerisque, risus diam rutrum velit, vel lacinia leo risus vel purus. Integer ipsum justo, auctor eu volutpat non, pellentesque a est. Maecenas sollicitudin fermentum mauris, egestas viverra augue congue vitae. Nam non nisi urna. Nullam non cursus orci.</p>
  </div>

  <div id="flow">
    <p class="tag">flow</p>
    <h2>This is a long headline with a verysuperlongtimeword</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tortor nisl, sagittis ac lectus et, blandit varius leo. Sed vel finibus nunc. Nam ipsum mi, mattis quis cursus id, hendrerit tristique dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eu placerat quam, vitae pretium tellus. Sed consequat tellus eu diam commodo, quis ultricies libero ultrices. Praesent nec ipsum venenatis, semper magna at, pretium tortor. Aliquam tempus lectus iaculis lacus pretium sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse dictum, felis eu pulvinar scelerisque, risus diam rutrum velit, vel lacinia leo risus vel purus. Integer ipsum justo, auctor eu volutpat non, pellentesque a est. Maecenas sollicitudin fermentum mauris, egestas viverra augue congue vitae. Nam non nisi urna. Nullam non cursus orci.</p>
  </div>
</div>

原因分析 #

• Grid容器默认列的尺寸逻辑：CSS Grid的默认列轨道尺寸为auto，这个值会优先匹配子元素的固有内容尺寸（比如长单词的完整长度），而非强制收缩到容器的可用空间。正常流中，块级元素会自动填充容器宽度，文本换行严格受容器宽度限制；但Grid子项在默认auto列下，会先尝试容纳内容的完整尺寸，直接导致长单词溢出容器。
• 断词属性的生效条件不满足：hyphens: auto和word-break: break-word的生效，需要元素自身有明确的宽度约束。Grid布局中，子项的宽度没有被强制约束（默认auto列不会主动限制子项宽度适配容器），浏览器无法触发断词逻辑，因此长单词不会自动断词或换行。
• 属性作用范围的限制：你把断词相关属性设置在了外层#wrapper上，但Grid子项（如<h2>、<p>）在Grid布局中的宽度计算脱离了正常流的约束，这些断词属性需要作用在有明确宽度限制的元素上才能生效，Grid默认的布局逻辑导致属性未发挥预期作用。

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