flex、grid 和响应式页面中的溢出排查

聊天记录列表需要考虑滚动位置。新消息不断增加时，脚本应根据用户是否位于底部决定是否自动滚动；用户正在查看历史消息时，不应因为新增内容强行跳回末尾。

页面出现滚动条、裁切或空白时的排查顺序

CSS 溢出🎊属性值的选择取决于内容的阅读价值和交互方式，不💡能简单认为隐藏内容就是更整洁的写法。

固定高度容器、图片和卡片的实际用法

CSS 溢出属性主要📢作用于具有尺寸限制的容器。当子元素、文本、图片或其他内容超出容器的🎊内容盒与内边距范围时，浏览器会根据属性值决定超出内容的处理方式。

图片容器适合使用 hidden 处理视觉裁切，尤其是缩略图、头像和带圆角的封面。图片本身还应设置最📢大宽度，避免原始尺寸过大撑开页面。

图片使用固定比例容器🔮时，可以结合 object-fit 控制裁切方式。cover 会填满容器并裁掉部分画面，contain 会尽量完整显示图片但可能留下空白，实际选择应根据图片是📌否需要完整阅读决定。