你的现有代码在Grid布局配置和消息块尺寸设置上存在几个关键问题，导致消息无法正确垂直堆叠，也没法适配不同长度的内容。下面是优化后的完整方案：

核心调整思路 #

• 让Grid容器自动按垂直方向排列消息（行流式布局）
• 让消息块宽度自适应内容，同时限制最大宽度避免过宽
• 处理长文本的换行与内容溢出问题
• 添加消息间的间距提升可读性

优化后的CSS代码 #

.Grid {
  width: 600px;
  height: 500px;
  display: grid;
  /* 让元素自动按行排列，每行一个消息 */
  grid-auto-flow: row;
  /* 消息之间的垂直间距 */
  gap: 12px;
  background-color: #1a1a1a;
  /* 消息超出容器高度时显示垂直滚动条 */
  overflow-y: auto;
  /* 给容器添加上内边距，避免消息贴边 */
  padding: 16px;
  box-sizing: border-box;
}

.Sender, .Receiver {
  /* 宽度自适应内容，最大不超过容器宽度的70% */
  width: fit-content;
  max-width: 70%;
  /* 最小高度保证消息块不会太扁 */
  min-height: 40px;
  /* 内边距让文本有呼吸空间 */
  padding: 10px 14px;
  /* 圆角提升视觉效果 */
  border-radius: 18px;
  /* 长文本自动换行 */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* 多行文本垂直居中 */
  display: flex;
  align-items: center;
}

.Sender {
  /* 发送方消息左对齐 */
  justify-self: start;
  background-color: #0084ff;
  color: white;
}

.Receiver {
  /* 接收方消息右对齐 */
  justify-self: end;
  background-color: #2d2d2d;
  color: white;
}

/* 可选：优化滚动条样式 */
.Grid::-webkit-scrollbar {
  width: 6px;
}

.Grid::-webkit-scrollbar-track {
  background: #2a2a2a;
}

.Grid::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}

对应的HTML代码（无需大幅修改） #

<div class="Grid">
  <div class="Sender">这是一条发送方的短消息</div>
  <div class="Receiver">这是接收方的消息，内容稍微长一点，看看会不会自动换行，测试一下文本溢出的处理效果</div>
  <div class="Sender">1</div>
  <div class="Receiver">2</div>
  <div class="Sender">我来发送一条超级长的消息，看看当内容超过最大宽度时会不会自动换行，确保布局不会被撑破，同时保持良好的可读性</div>
  <div class="Receiver">6</div>
  <div class="Sender">7</div>
  <div class="Receiver">8</div>
  <div class="Sender">9</div>
  <div class="Receiver">10</div>
  <div class="Sender">11</div>
  <div class="Receiver">12</div>
</div>

关键细节解释 #

1. Grid容器配置：grid-auto-flow: row确保每个消息块单独占一行，gap添加消息间的垂直间距，overflow-y: auto处理消息过多时的滚动需求。
2. 消息块尺寸：width: fit-content让消息宽度随内容变化，max-width:70%避免消息过宽占满整个容器，提升阅读体验。
3. 内容溢出处理：overflow-wrap: break-word保证长单词或连续文本自动换行，不会撑破布局；如果消息内容特别多，可以给消息块添加max-height: 200px和overflow-y: auto来实现消息内部的滚动。
4. 视觉优化：添加圆角、内边距和合适的背景色，让聊天消息更贴近主流应用的样式。

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