如何用CSS实现自适应两栏布局_左侧固定右侧自适应的Flex方案-css教程-PHP中文网

最可靠方案是父容器设 display: flex、左侧用 flex: 0 0 200px、右侧用 flex: 1 并加 min-width: 0；缺一不可，否则右侧会撑破、换行或不占剩余空间。

如何用css实现自适应两栏布局_左侧固定右侧自适应的flex方案

直接用 display: flex 最可靠，但必须同时满足三个条件：父容器设 display: flex、左侧用 flex: 0 0 200px（不能只写 width: 200px）、右侧用 flex: 1 并加 min-width: 0。漏掉任意一个，右侧就会撑破、换行或根本不占剩余空间。

为什么 `flex-grow: 1` 单独写没用

它不是“让元素变宽”，而是“把主轴剩余空间按比例分给它”。没有剩余空间，它就什么也不做。

.container 缺少 display: flex → 整个 Flex 上下文不存在
左侧只写 width: 200px 没配 flex-shrink: 0 → 它会被压缩，挤占本该属于右侧的空间
右侧内容本身很宽（比如长 URL、未设 min-width: 0 的嵌套 flex 容器）→ flex-basis: auto 导致计算异常，“自适应”变成“自膨胀”

`flex: 0 0 200px` 和 `width: 200px` 的实际区别

前者是 Flex 层语义：不放大、不缩小、基准就是 200px；后者只是盒模型初始宽度，在 Flex 容器里仍可能被 flex-shrink 压缩——小屏下侧边栏文字换行、图标错位，八成是这个原因。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐写法：.sidebar { flex: 0 0 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
避免混用：width 和 flex-basis 同时存在可能触发浏览器计算冲突
响应式切换时，改 flex-basis 比改 width 更安全，例如：@media (max-width: 768px) { .sidebar { flex: 0 0 60px; } }

右侧必须加 `min-width: 0` 才能真自适应

Flex 子项默认最小宽度是内容宽度（min-width: auto），遇到长单词、URL 或未设 word-break 的文本，它宁可横向溢出也不收缩——结果就是意外出现横向滚动条，或内容压垮布局。

必加样式：.main { flex: 1; box-sizing: border-box; min-width: 0; }
配套处理：overflow-wrap: break-word 或 word-break: break-word 防止内部长文本溢出
Safari 14–15 下若右侧有 border 或 padding 且没设 box-sizing: border-box，flex: 1 算出的剩余空间会偏小，右侧可能变窄甚至消失

真正容易被忽略的是 min-width: 0 —— 它不写，右侧在窄屏下就拒绝收缩，而你可能花半小时排查 HTML 结构或 JS 脚本，却没意识到问题藏在这一行 CSS 里。