新增question-container元素后原有div被推到header下方的原因及解决方法

问题根因 #

你为#flashcard-container设置了justify-content: center属性，该属性会让flex容器内的所有子元素整体在纵向主轴居中：

• 仅单个question-container时，子元素总高度小于容器高度，居中效果符合预期
• 新增第二个question-container后，子元素总高度超过容器高度，整体居中逻辑会导致子元素顶部向上溢出容器，被导航栏遮挡

修复方案 #

方案1（全浏览器兼容，优先推荐） #

修改两处CSS即可，同时保留单个元素时的居中效果、多元素时滚动正常：

1. 修改#flashcard-container样式，移除justify-content: center，新增上下内边距控制间距：

#flashcard-container {
  grid-area: flashcard;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto; /* 替换scroll，无溢出时不显示滚动条，体验更好 */
  padding: 70px 0; /* 新增上下内边距，替代子元素的上下外边距 */
}

2. 修改question-container样式，移除顶部外边距，保留底部间距分隔多个卡片：

.question-container {
  width: 80%;
  min-height: 65vh;
  background-color: black;
  margin-bottom: 70px;
  /* 删掉原来的margin-top: 70px */
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-areas: "question buttons";
}

3. 可选优化：给最后一个卡片移除底部外边距，避免底部多余空白

.question-container:last-child {
  margin-bottom: 0;
}

方案2（现代浏览器兼容） #

无需修改其他样式，直接将#flashcard-container的justify-content: center替换为justify-content: safe center即可：

#flashcard-container {
  grid-area: flashcard;
  display: flex;
  flex-direction: column;
  justify-content: safe center; /* safe关键字会在内容溢出时自动切换为顶部对齐，避免遮挡 */
  align-items: center;
  overflow-y: scroll;
}

该方案利用CSS的safe对齐关键字，内容高度小于容器时保持居中，超出时自动改为顶部对齐，不会出现溢出遮挡问题。

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