核心思路是父容器设 display: flex，侧边栏用 flex: 0 0 240px 锁定宽度，主内容用 flex: 1 自适应填满；收起时改用 flex: 0 0 0 + width: 0 + overflow: hidden 实现平滑过渡，避免 display: none 导致重排错乱。
用
实现侧边栏主内容自适应布局
核心思路是把容器设为
，侧边栏用
锁定宽度不伸缩，主内容用
填满剩余空间。这样既避免浮动或
绝对定位
的副作用，又天然支持响应式断点切换。
表示“不放大、不缩小、按内容或设定宽”，适合固定宽度侧边栏（如
或
）
等价于
，主内容会撑开并响应容器变化，无需写死
注意父容器必须有明确高度（如
）或靠内容撑开，否则
可能不生效
移动端收起侧边栏时用
隐藏而非
直接用
会导致 flex 项重排错乱，尤其在动画或 JS 切换状态时容易闪动或错位。推荐用
+
配合
实现“视觉隐藏但保留布局流”。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
收起状态：给侧边栏加
、
、
，主内容自动占满
展开状态：恢复
（或其他设定值），过渡用
不要对
属性本身做
，部分
浏览器
不支持；改用
或
过渡更稳妥
侧边栏内部文字换行和溢出处理要单独控制
Flex 容器默认不会让子元素自动换行，侧边栏里长菜单名或标题容易撑破宽度。不能只靠
，得配合
和
。
菜单项文字：用
+
+
侧边栏整体：若内容超长需滚动，给侧边栏加
，并确保父容器有固定高度
避免对
子项设
—— 它会跟
计算冲突，优先用
或
侧边栏的弹性行为常被误认为“只要设了
就自动响应”，其实关键在
和
的组合是否匹配实际需求；小屏下即使用了
切换
值，也要检查父容器是否被其他样式（比如
或
）锁死了尺寸。
display: flexflexflex: 0 0 autoflex: 1flex: 0 0 auto240px20remflex: 1flex: 1 1 0widthheight: 100vhflexflexdisplay: nonedisplay: noneflex: 0 0 0overflow: hiddenwidth: 0flex: 0 0 0width: 0overflow: hiddenflex: 0 0 240pxtransition: flex 0.3s easeflextransitionmin-widthwidthwhite-space: nowrapoverflowtext-overflowwhite-space: nowrapoverflow: hiddentext-overflow: ellipsisoverflow-y: autoflexwidth: 100%flexflex-basismin-width.sidebar {
flex: 0 0 240px;
min-width: 240px;
overflow-y: auto;
}
.sidebar.collapsed {
flex: 0 0 0;
width: 0;
overflow: hidden;
transition: width 0.3s ease;
}
.sidebar a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}flexflex-shrinkflex-basis@mediaflexmin-widthposition: fixed