JS动态生成侧边栏下方div后上方菜单div尺寸异常求助

常见问题根因 #

• 父容器sidenav未设置明确的弹性布局规则，纵向文档流中相邻块级元素会因为动态插入内容的尺寸变化，连带触发父容器的盒模型重新计算，反向作用于上方的menu元素
• 未提前锁定滚动条占位，当动态插入的chat-list内容超出容器高度、触发纵向滚动条时，父容器内部可用宽度被滚动条挤占，导致上方元素的宽度计算值发生变动
• 动态生成的chat-list容器未设置独立的尺寸边界，插入的长内容会直接撑开父容器的内容区宽度/高度，挤压相邻的上方菜单元素的布局空间

静态CSS可实现的解决方案（无需在列表加载时触发JS改样式） #

• 给sidenav根容器全局配置统一盒模型规则：添加box-sizing: border-box; display: flex; flex-direction: column; overflow-y: auto; scrollbar-gutter: stable;，固定纵向布局的计算基准，提前预留滚动条占位空间
• 给固定展示的menu元素设置独立的伸缩锁定规则：添加flex-shrink: 0; width: 100%;，让该元素在弹性布局中不会被父容器的空间变化压缩、拉伸
• 给动态生成的chat-list容器设置独立的内容承载规则：添加flex: 1 1 0; min-height: 0; overflow-y: auto; width: 100%;，让列表区独立占据父容器剩余的纵向空间，内部内容超出时自己处理滚动，不会撑开父容器挤压上方元素

效果验证方式 #

上述规则全部在静态CSS中配置一次即可生效，反复清空、重新加载聊天列表内容时，观察上方菜单的宽度、边距是否保持无变动，即可确认问题是否解决

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