通过justify-content和align-items居中的div如何仅向下扩展

问题本质 #

父级元素#body设置了align-items: center，会让子元素#container始终保持在视口的垂直居中位置。当#container内部内容增加、高度变大时，为了维持整体居中，容器会同时向上、向下延伸，就出现了你观察到的上下同时扩展的现象。

解决方法 #

方法1：初始容器居中，新增内容仅向下延伸 #

适合需要初始状态容器居中，内容增加后顶部位置不变、仅往下扩展的场景，修改CSS如下：

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

#body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  /* 移除原来的align-items: center，用padding实现初始居中 */
  padding-top: calc((100vh - 200px) / 2);
  overflow-y: auto;
}

#container {
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
  /* 增加底部边距，避免内容过多时容器贴到页面底部 */
  margin-bottom: 24px;
}

原理是通过padding-top固定了容器的顶部起始位置，容器高度增加时只会向下撑开，不会改变顶部坐标。

方法2：容器始终居中，内容超出时内部滚动 #

适合需要容器一直保持在视口居中位置，不希望容器高度超出视口的场景，修改CSS如下：

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

#body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  background-color: whitesmoke;
  min-height: 200px;
  width: 200px;
  display: flex;
  flex-direction: column;
  /* 限制容器最大高度，避免撑出视口 */
  max-height: calc(100vh - 48px);
}

#items {
  flex: 1;
  overflow-y: auto;
}

内容超出容器最大高度时，内部内容区会出现滚动条，容器整体高度不会变化，也就不会出现上下扩展的问题。

内容的提问来源于stack exchange，提问作者Mush-A