css grid高度超过父节点高度的解决办法

CSS Grid布局中的一个问题就是当网格内容的高度超出其父元素的高度时，它通常不会自动滚动。为了解决这个问题，你可以采用以下几种方法：

1. **设置 `overflow` 属性**：给包含Grid的容器添加 `overflow-y: auto;`，这会让内容区域出现滚动条，允许内容超出。

.container {
   display: grid;
   overflow-y: auto;
}

2. **指定 `grid-auto-flow` 和 `max-height`**：通过设置 `grid-auto-flow: column;` 或 `row;` 和一个合适的 `max-height`，限制网格内容的高度并使其可以滚动。

.container {
   display: grid;
   grid-auto-flow: row dense;
   max-height: 400px;
   overflow-y: auto;
}

3. **使用 flexbox 内联**：如果你希望网格和其他 flex 容器一起工作，可以将网格嵌套在一个 flex 容器里，并应用 `overflow-y` 到外层容器。

.parent {
   display: flex;
   flex-wrap: wrap;
   overflow-y: auto;
}

.grid-container {
   flex: 1; /* 自动分配剩余空间 */
}

4. **响应式设计**：结合媒体查询，针对不同的屏幕尺寸调整 max-height，以便在小屏幕上更易管理。