聊天历史滚动样式求助：设置固定高度后旧内容无法显示

我用下面的CSS展示机器人聊天历史：

.chat-history {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 20px 20px;
  justify-content: center;
  border: 1px solid black;
  flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
  flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
  max-width: calc(1200px - 10px); /* Adjust the value as needed */
  margin: 5px; /* Provides spacing between items */
  overflow: auto; /* Scrollable content */
}

现在所有聊天内容会撑长页面，想让用户上下滚动查看，但设置height: 300px后，部分旧聊天内容显示不出来，求解决方法。

解决步骤： #

• 去掉justify-content: center，改用justify-content: flex-start。flex垂直布局下，center会让所有聊天内容居中对齐，容器固定高度后，超出的旧消息会被挤到容器顶部外面，导致无法看到。
• 明确设置height: 300px（或你需要的固定高度），同时用overflow-y: auto替代overflow: auto，精准控制垂直方向滚动。
• 移除flex-wrap: wrap，聊天消息是垂直排列的，不需要换行，这个属性会干扰垂直布局的正常渲染。

修改后的完整CSS： #

.chat-history {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin: 5px;
  justify-content: flex-start;
  border: 1px solid black;
  flex: 1 1 auto;
  max-width: calc(1200px - 10px);
  height: 300px;
  overflow-y: auto;
}

内容的提问来源于stack exchange，提问作者Python3-Pyro