如何修复CSS Flex布局里右侧内容被左侧固定列挤压的问题？-css教程-PHP中文网

右侧被左侧挤压的根本原因是左侧元素默认flex-shrink: 1，导致空间不足时主动压缩；解决方法是为左侧设flex: 0 0 240px或flex-shrink: 0，锁死其宽度并阻断收缩逻辑。

如何修复css flex布局里右侧内容被左侧固定列挤压的问题？

右侧内容被左侧挤压，本质是flex-shrink没关掉

不是右侧写错了flex: 1，而是左侧元素默认带flex-shrink: 1，只要总宽度超限，它就会主动压缩自己——连带把右侧能分到的“剩余空间”也一起吃掉。现象包括：左侧文字换行、图标缩成小点、右侧窄得只剩一条缝。

只写width: 240px没用，Flex容器里width只是参考值，真正参与计算的是flex-basis和flex-shrink
必须用flex: 0 0 240px或至少flex-shrink: 0，显式告诉浏览器“这个栏不许缩”
如果左侧是<img>或带图标的按钮，单独加flex-shrink: 0可能还不够，得配flex: 0 0 auto + max-width: 100%

右侧`flex: 1`不撑满？先看有没有“剩余空间”可分

flex: 1不是魔法，它只分配主轴上“已知的剩余空间”。父容器没显式宽度、左侧没锁死、右侧自身内容太宽——三者任一成立，flex: 1就等于没写。

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

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

下载

父容器必须有明确宽度来源：width: 100%、width: 100vw或max-width: 1200px，不能只靠内容撑开
左侧必须用flex: 0 0 240px，别混用width和flex-basis，否则浏览器可能冲突计算
右侧要加min-width: 0，否则 Flex 默认按内容最小宽度（比如长 URL）起步，flex: 1根本分不到空间

Safari 下右侧突然变窄甚至消失？检查`box-sizing`和`border`

Safari 14–15 对border和padding的 Flex 空间计算特别敏感。漏掉box-sizing: border-box时，它会把边框和内边距算进“剩余空间”，导致右侧可用宽度严重缩水。

右侧务必写全：flex: 1; box-sizing: border-box; min-width: 0;
如果右侧内部还有嵌套 Flex 容器，它的子项也得同步设min-width: 0，否则内层也会卡住外层分配
避免在右侧直接写width: 100%，它和flex: 1逻辑冲突，尤其在 Safari 中容易触发重排抖动

响应式收起左侧栏时，别用`display: none`

display: none会清空渲染树，导致焦点丢失、动画卡顿、屏幕阅读器中断。更平滑的做法是让左侧“视觉隐藏但保留布局占位”。

媒体查询中改左侧为：flex-basis: 0; transform: translateX(-100%); overflow: hidden;
右侧保持flex: 1，自动占满全宽，无需额外调整
如果需要过渡效果，给transform加transition: transform 0.2s ease，比display切换更可控

右侧撑不满的问题，往往不是某个属性写错，而是多个默认行为叠加的结果：Flex 的min-width: auto、flex-shrink: 1、Safari 对box-sizing的严格计算——它们一起生效时，人眼看到的只是“右侧变窄”，但根子在左侧是否真锁死了、父容器宽度是否真明确了、右侧是否真放开了最小限制。