我有一个奇怪的html和css结构，如何让我的聊天消息对齐到底部？

<div class="chat-container">
  <div class="chat-message">消息1</div>
  <div class="chat-message">消息2</div>
  <div class="chat-message">消息3</div>
</div>

.chat-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 300px; /* 设置容器高度，确保有滚动条时可以滚动 */
}

.chat-message {
  margin-bottom: 10px; /* 调整消息之间的间距 */
}

<div class="chat-container">
  <div class="chat-message">消息1</div>
  <div class="chat-message">消息2</div>
  <div class="chat-message">消息3</div>
</div>

.chat-container {
  display: grid;
  grid-template-rows: 1fr auto; /* 设置两行，第一行占满剩余空间，第二行自适应内容高度 */
  height: 300px; /* 设置容器高度，确保有滚动条时可以滚动 */
}

.chat-message:last-child {
  align-self: end; /* 将最后一个聊天消息对齐到底部 */
}