结论：用 flex: 1 实现右侧自适应，必须配 flex-shrink: 0 给左侧、min-width: 0 给右侧，且父容器得有明确宽度来源（比如 width: 100% 或 100vw）——否则 flex: 1 在小屏下大概率失效或溢出。
直接说结论：用 flex: 1 实现右侧自适应，必须配 flex-shrink: 0 给左侧、min-width: 0 给右侧，且父容器得有明确宽度来源（比如 width: 100% 或 100vw）——否则 flex: 1 在小屏下大概率失效或溢出。
为什么 flex: 1 在移动端常“不生效”
不是语法写错了，而是移动端视口窄、内容挤压强，flex: 1 的行为被几个隐藏条件卡住：
- 左侧没加
flex-shrink: 0→ 小屏时它被压缩，挤占本该分给右侧的空间 - 右侧没设
min-width: 0→ Flex 默认会让子项最小宽度不低于内容自身宽度（比如长 URL、未换行文本），导致它拒绝收缩，横向溢出 - 父容器没显式宽度（如只靠
display: flex但没设width或max-width）→ 剩余空间算不出来，flex: 1就没东西可分 - Safari 14–15 下，右侧若带
padding或border却没box-sizing: border-box，会把边框当内容宽来算剩余空间，结果右侧变窄甚至消失
移动端推荐写法：左侧固定 + 右侧 flex: 1 的最小可靠组合
以下结构在 iOS / Android 主流 WebView 和 Safari 中实测稳定：
.container {
display: flex;
width: 100%; /* 关键：提供主轴宽度上下文 */
}
.sidebar {
flex: 0 0 240px; /* 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 240px */
}
.main {
flex: 1;
min-width: 0; /* 必加：防文字/内联元素撑开 */
box-sizing: border-box; /* 必加：尤其 Safari */
overflow-wrap: break-word; /* 防长单词溢出 */
}
注意：flex: 0 0 240px 比 width: 240px 更安全——前者是 Flex 层语义锁定，后者只是盒模型初始值，仍可能被 flex-shrink 干扰。
立即学习“前端免费学习笔记（深入）”；
响应式收起左侧栏时，别用 display: none
直接隐藏会导致重排抖动、焦点丢失、动画生硬。更平滑的做法是：
- 用
@media (max-width: 768px)把左侧flex-basis设为0，并配合overflow: hidden和transform: translateX(-100%) - 右侧保持
flex: 1，它会自动占满全宽 - 过渡动画只加在
transform和opacity上，不触发 layout
示例：
@media (max-width: 768px) {
.sidebar {
flex: 0 0 0;
overflow: hidden;
transform: translateX(-100%);
opacity: 0;
}
.main {
flex: 1;
}
}
容易被忽略的兼容细节
真正让布局在各种机型上“不崩”的点，往往藏在边界场景里：
-
min-width: 0不写，小屏下右侧一出现长链接或表格，就会强制拉宽容器，触发横向滚动条 - 左侧用
width: 240px而非flex: 0 0 240px，在安卓低版本 WebView 中可能被意外压缩成 100px - 右侧内部嵌套了另一个
display: flex容器，却没给它也加min-width: 0→ 溢出会层层传导 - 想让右侧高度随内容撑开，又想支持滚动，不能只靠
height: 100vh；得让父容器有min-height: 100vh，右侧再配max-height: 100%+overflow-y: auto
复杂点不在怎么写，而在哪一层该加 min-width: 0、哪一层该锁死 flex-shrink——这些控制权一旦漏掉，就只能靠调试器逐层查 computed styles 才能定位。
