最简方案是父容器设display: flex，左侧用width: 200px和flex-shrink: 0防压缩，右侧用flex: 1自适应填满剩余空间；需避免float、calc()或JS计算，注意IE11兼容性及内容溢出处理。
Flex实现两列布局：左侧固定宽度，右侧自适应
直接用 display: flex + flex-basis 或 flex 缩写就能搞定，不用 float、不用 calc()、也不用 JS 计算宽度。
关键写法：给左侧设固定宽，右侧用 flex: 1
这是最简且兼容性好的方案。父容器设 display: flex，左侧元素设置明确宽度（如 width: 200px），右侧元素写 flex: 1 —— 它会自动填满剩余空间。
常见错误是只写 flex: 1 却忘了给左侧加 flex-shrink: 0，结果内容一多，左侧被压缩。所以更稳妥的写法是：
body {
display: flex;
}
.left {
width: 200px;
flex-shrink: 0; /* 防止被挤压 */
}
.right {
flex: 1; /* 等价于 flex: 1 1 0% */
}
-
flex: 1展开是flex: 1 1 0%，其中0%表示初始主轴尺寸为 0，靠 flex-grow 填满；但实际中写flex: 1就够用 - 如果左侧用
min-width或max-width，记得同步加flex-shrink: 0，否则在窄屏下仍可能收缩 - IE11 对
flex: 1支持有 bug，若需兼容，可改用flex: 1 1 auto并确保左侧有明确width
为什么不用 flex-basis 直接设左侧宽度？
可以，但没必要绕弯。有人写 flex: 0 0 200px 给左侧，这等价于 flex-grow: 0; flex-shrink: 0; flex-basis: 200px —— 功能完全一样，但可读性不如直接写 width + flex-shrink: 0 直观。
真正要注意的是：如果左侧内容超长（比如长文本或未换行的 URL），默认会撑开容器，此时得加 overflow: hidden 或 word-break: break-all 控制，flex 本身不处理内部溢出。
响应式场景下怎么切换单列？
用媒体查询直接关掉 flex，让子元素自然块级流式排列：
@media (max-width: 768px) {
body {
display: block;
}
.left, .right {
width: 100%;
}
}
注意别只隐藏左侧或只设 display: none，否则右侧的 flex: 1 在脱离 flex 上下文后失效，可能表现异常。
真要动态切换布局，优先考虑用 @container（如果支持）或 JS 检测容器宽度，而不是依赖视口断点——毕竟两列布局常出现在侧边栏区域，宽度变化和屏幕无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
