flex-direction: column + scrollintoview({ block: 'end' })是最稳方案，因普通块级流下scrollheight易滞后致滚动偏移，且必须对最新消息元素调用并确保渲染完成，气泡布局需用margin-auto配合伪元素小尾巴，断行策略要按中英文混排适配。
直接用 flex-direction: column + scrollIntoView({ block: 'end' }) 是目前最稳的方案，比手动算 scrollTop = scrollHeight 更可靠——后者在动态插入多条消息时容易滚错位置，尤其 Safari 下表现不一致。
为什么 flex-direction: column 是必须的
滚动容器必须设 display: flex 且 flex-direction: column，否则 scrollHeight 计算会失准，scrollIntoView 的 block: 'end' 也失去语义基础。
- 不用
flex而用普通块级流时，新消息插入后scrollHeight可能滞后一帧，导致滚动偏移 -
flex-direction: column确保子元素自然从上到下堆叠，DOM 插入顺序与视觉顺序严格一致 - 容器必须有明确
height或max-height，不能靠min-height或父级撑开，否则溢出行为不可控
scrollIntoView 调用时机和目标元素怎么选
不是对整个消息列表调用，而是对最新一条 <div class="message"> 元素调用；且必须等它真实渲染进 DOM 后再执行。
<ul>
<li>Vue 中用 <code>this.$nextTick(() => newMsgEl.scrollIntoView(...))
useEffect 里监听 messages.length 变化，再查 DOM 获取最新元素requestAnimationFrame：防止因样式计算未完成导致滚动错位{ behavior: 'smooth', block: 'end' }，缺 block: 'end' 会默认居中，把新消息顶到视口中间气泡左右贴边 + 小尾巴怎么写才不漂移
左右消息靠 margin-left: auto / margin-right: auto 实现，不是 float 或 position: absolute —— 后者会让时间戳错位、响应式时气泡重叠。
- 用户消息加
class="mine"，内部气泡设margin-left: auto+border-top-left-radius: 0 - 对方消息用
class="theirs"，气泡保持左对齐或显式margin-right: auto+border-top-right-radius: 0 - 小尾巴统一用伪元素：
.mine .bubble::before（左箭头）和.theirs .bubble::after（右箭头），border-color单边着色，z-index分层避免发虚 - 所有气泡必须设
max-width: 80%，禁用width: 100%，否则窄屏下文字挤成一列，尾巴定位也会偏移
长文本、中英文混排换行怎么不卡死
单靠 white-space: normal 不够，得组合控制断行策略。
- 中文为主场景用
word-break: break-all，强制按字符断，防超长 ID 或链接撑爆气泡 - 中英混排优先用
overflow-wrap: break-word（新标准），兼容性比word-break: break-word更好 -
max-width和伪元素偏移值（如left: -12px）必须同步缩放：用rem时尾巴偏移也得用rem，否则高 DPI 屏幕下箭头悬空
真正难的不是画出气泡，而是让它们在各种输入长度、不同设备缩放、消息动态增删时都保持位置精准、滚动锚定稳定、时间戳不漂移——这些细节一旦漏掉，调试成本远高于初始实现。
