CSS 如何避免产品目录ul列表浮动侵入聊天框 窗口缩放时布局不重叠

当前出现窄屏重叠的核心原因是：原有基于浮动的布局没有给两个相邻模块建立强宽度约束，窗口缩小时浮动定位的#renderList会脱离文档流的占位逻辑，挤占左侧#chatbox的可用空间。直接按以下步骤修改样式，就能实现任意窗口尺寸下两栏独立排布、不会错位重叠：

• 第一步：删除#renderList上原有的float: right定位属性。浮动布局是本次错位的根源，直接替换为稳定性更强的弹性布局即可从根源解决问题。
• 第二步：找到页面上同时包裹#chatbox和#renderList的顶层父容器，如果没有这个公共父容器，就新建一个class为main-wrap的容器，把两个模块都收纳进去，给这个父容器加基础布局样式：

  .main-wrap {
    display: flex;
    gap: 16px; /* 两个模块之间的固定安全间距，不会紧贴挤压 */
    width: 100%;
    align-items: flex-start; /* 保证两个模块顶部对齐，不会随内容高度差错位 */
  }
  

• 第三步：分别给两个模块设置明确的宽度规则，从根上杜绝宽度互相侵占：

  /* 聊天框占据除右侧产品目录外的所有剩余宽度 */
  #chatbox {
    flex: 1 1 auto;
    min-width: 0; /* 必加属性：防止聊天框内的长内容把自身撑破宽度，挤占侧栏空间 */
  }
  /* 右侧产品目录保持固定宽度，不会随窗口缩放漂移 */
  #renderList {
    flex: 0 0 280px; /* 数值可根据实际需求调整侧栏宽度，这里的规则是不拉伸、不压缩，始终保持固定宽度 */
  }
  

• 第四步：清理动态渲染列表的默认样式溢出问题，防止列表项自身的尺寸问题带来错位：

  /* 清除浏览器给ul加的默认内外边距 */
  #proList {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  /* 限制列表项的宽度不超出父容器边界 */
  #proList .item {
    width: 100%;
    box-sizing: border-box; /* 将内边距、边框纳入宽度计算，避免撑出容器 */
    overflow-wrap: break-word; /* 长文本自动换行，不会横向撑破列表容器 */
  }
  

补充说明：如果坚持保留原有浮动布局的写法，必须给左侧#chatbox设置明确的像素宽度（值为父容器宽度减去右侧#renderList的宽度再减去两者的间距），但这种写法需要手动适配滚动条宽度、边距偏差，窗口缩放时很容易再次出现重叠，稳定性远低于上述弹性布局方案。

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