Flex布局子元素上移超出父容器，滚动无法显示顶部内容

需求：实现一个容器类，使子元素从左到右、从上到下排列；容器不超出父容器内框；内容超出时显示垂直滚动条。

当前实现的CSS代码如下：

容器类.wrap-container #

.wrap-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; // vertically
  align-items: flex-start; // horizontally
  // justify-content: space-between; /* Space items evenly along the main axis */
  padding: 15px;
  gap: 15px;
  margin: 0px;
  border: solid blue 1px;
  // height: calc(100% - 30px);
  // width: calc(100% - 30px);
  max-height: calc(100% - 30px); 
  max-width: calc(100% - 30px);
  overflow: auto;
}

父容器.parent #

.parent {
  display: block;
  width: 500px;
  height: 200px;
  border: solid red 1px;
  padding: 15px;
  gap: 15px;
  margin: 70px;
}

子元素.child #

.child {
  border: 1px solid transparent; 
  border-image-slice: 1; 
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5); 
  padding: 5px;
  width: 150px;
  height: 100px;
}

问题表现 #

容器能正确排列子元素，但滚动到最上方时，无法看到第一行的子元素（如“It's working 1”和“It's working 2”）。

问题原因 #

1. align-content: center导致垂直偏移：该属性会让容器内的所有flex行整体垂直居中，当内容高度超过容器高度时，滚动区域的起始位置是居中后的位置，顶部内容被“挤出”可视范围，即使滚动到顶也无法显示。
2. max-height无法固定容器高度：max-height仅限制容器的最大高度，当内容不足时容器会自动收缩，无法保证容器占据父容器的可用空间，导致overflow: auto无法正确触发滚动逻辑。

解决方案 #

修改.wrap-container的两个关键属性：

• 将align-content: center改为align-content: flex-start，让flex行从容器顶部开始排列
• 将max-height: calc(100% - 30px)改为height: calc(100% - 30px)，固定容器高度，确保溢出时滚动条正常工作

修改后的.wrap-container代码：

.wrap-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; // 改为顶部对齐
  align-items: flex-start;
  padding: 15px;
  gap: 15px;
  margin: 0px;
  border: solid blue 1px;
  height: calc(100% - 30px); // 固定高度
  max-width: calc(100% - 30px);
  overflow: auto;
}

修改后，容器内的子元素会从顶部开始排列，内容溢出时滚动条可以完整显示所有子元素，包括最顶部的内容。

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