CSS Grid布局中<main>标签overflow-y:auto失效问题求助

问题根源 #

你给.container > *统一设置了display: flex; justify-content: center; align-items: center;，这会让<main>变成flex容器。而flex容器里的文本作为匿名flex项，默认强制单行显示（flex-wrap: nowrap是默认值），同时align-items: center会让文本垂直居中——就算你给<main>加了overflow-y: auto，也因为flex项的高度会撑满内容本身，不会被容器的网格高度限制，所以滚动条根本不会触发。

解决方法（无需修改字体大小/网格区域） #

方案1：取消Main的Flex容器属性（最直接） #

给<main>单独设置display: block，把它从flex容器改回普通块级元素，这样文本会自动换行，超出容器高度时就会触发垂直滚动：

div.container>main {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  overflow-y: auto;
  display: block; /* 覆盖父级的flex设置 */
  padding: 1rem; /* 可选，让文本不贴容器边缘，优化阅读体验 */
}

方案2：保留Flex但调整参数（适合需要Flex布局的场景） #

如果一定要让<main>保持flex容器（比如内部有多个元素需要布局），可以调整以下属性：

div.container>main {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  overflow-y: auto;
  flex-wrap: wrap; /* 允许flex项换行 */
  align-items: flex-start; /* 取消垂直居中，避免内容溢出后顶部被隐藏 */
  padding: 1rem;
}

修改后的完整代码 #

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
}

div.container {
  width: 100%;
  height: 100%;
  font-size: xx-large;
  font-weight: bolder;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr 4fr 1fr;
}

div.container>* {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.container>header {
  background-color: red;
  grid-column: 1 / 4;
  grid-row: 1 / 2;
}

div.container>aside:first-of-type {
  background-color: yellow;
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

div.container>main {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  overflow-y: auto;
  display: block;
  padding: 1rem;
}

div.container>aside:last-of-type {
  background-color: green;
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

div.container>footer {
  background-color: blue;
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

HTML #

<div class="container">
  <header>Header</header>
  <aside>Right</aside>
  <main>En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero, adarga antigua, rocín flaco y galgo corredor. Una olla de algo más vaca que carnero, salpicón las más noches, duelos
    y quebrantos los sábados, lentejas los viernes, algún palomino de añadidura los domingos, consumían las tres partes de su hacienda. El resto della concluían sayo de velarte, calzas de velludo para las fiestas con sus pantuflos de lo mismo, los días
    de entre semana se honraba con su vellori de lo más fino. Tenía en su casa una ama que pasaba de los cuarenta, y una sobrina que no llegaba a los veinte, y un mozo de campo y plaza, que así ensillaba el rocín como tomaba la podadera. Frisaba la edad
    de nuestro hidalgo con los cincuenta años, era de complexión recia, seco de carnes, enjuto de rostro; gran madrugador y amigo de la caza. Quieren decir que tenía el sobrenombre de Quijada o Quesada (que en esto hay alguna diferencia en los autores
    que deste caso escriben), aunque por conjeturas verosímiles se deja entender que se llama Quijana; pero esto importa poco a nuestro cuento; basta que en la narración dél no se salga un punto de la verdad.</main>
  <aside>Left</aside>
  <footer>Footer</footer>
</div>

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