如何实现侧边栏全尺寸可滚动且不影响其他元素及顺序？

问题根源 #

核心问题出在Flex布局的默认元素拉伸行为，以及滚动容器的范围设置错误，导致调整滚动逻辑时干扰了其他元素的尺寸或布局。

具体实现步骤 #

1. 固定侧边栏容器布局
   给.side设置垂直Flex布局并固定高度，避免拉伸父元素或关联元素：

   .side {
     display: flex;
     flex-direction: column;
     height: 100vh; // 若侧边栏嵌套在其他容器内，可改为 height: 100%;
     width: 280px; // 替换为你的侧边栏实际宽度
   }
   

2. 创建独立滚动区域
   在.side内部，把需要滚动的.cms-element（1-4）包裹进一个容器（比如.side-scroll-content），让这个容器单独承担滚动逻辑，不影响其他元素：

   .side-scroll-content {
     flex: 1; // 占据侧边栏除固定元素外的剩余空间
     overflow-y: auto; // 内容超出时垂直滚动
   }
   

3. 锁定元素原有尺寸
   给每个.cms-element设置防压缩属性，确保它们保持原有大小，同时占满侧边栏宽度：

   .cms-element {
     flex-shrink: 0; // 禁止元素被压缩变形
     width: 100%; // 避免align-items:flex-start导致的宽度不足问题
     // 保留你原有的padding、margin、背景等样式
   }
   

效果说明 #

• 侧边栏在任何屏幕尺寸下，超出部分都会在独立滚动区域内滚动，不会隐藏内容
• 所有.cms-element保持原有大小和顺序，不会被拉伸或产生异常间隙
• 完全不影响侧边栏外的其他元素布局

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