深色模式下边框“挤压”是因border、box-sizing、flex-shrink叠加失控所致，非flex缺陷；须统一设min-width:0、box-sizing:border-box，并完整声明border-width/style/color。
Flexbox 本身不处理深色模式或边框挤压问题，所谓“边框自适应挤压”其实是 border + box-sizing + flex-shrink 在深色模式切换时暴露的计算偏差，不是 Flex 的 bug，而是样式叠加失控。
为什么深色模式下边框看起来被“挤压”了
常见现象是：深色模式启用后，原本整齐并排的卡片/按钮突然右边缘错位、间距变小、甚至内容被裁切。这不是颜色导致的，而是深色模式 CSS 中常批量覆盖 border、padding 或 background，而没同步修正 box-sizing 和 flex 项目的收缩行为。
- 深色模式规则里写了
border: 1px solid #333，但父容器没设box-sizing: border-box→ 边框额外增加宽度，挤占 flex 剩余空间 - 深色模式启用了
filter: invert(0.1)或color-scheme: dark，间接触发某些浏览器（如 Safari）对input、textarea的默认内边距重置，导致子项实际尺寸突变 - 用
prefers-color-scheme: dark切换时，只改了颜色，却忘了同步更新flex-basis或min-width—— 尤其当深色模式下字体渲染略粗，文字撑宽了内容区
修复关键：锁定边界计算，而不是依赖“自动”
Flex 项目默认有 min-width: auto，它会让内容（包括边框）强行撑开最小宽度，一旦深色模式加了 border，就立刻触发挤压。必须显式干预：
- 所有参与 flex 布局的直接子元素，统一加
min-width: 0—— 这是开关，允许它被压缩 - 所有带
border的 flex 子项，必须配box-sizing: border-box，否则 border 算在 width 外 - 如果子项是表单控件（
input、select），深色模式下要额外重置height和line-height，避免因系统字体度量差异导致高度突变 - 避免在深色模式媒体查询里只写
border-color，而漏掉border-width—— 某些 UA 样式会把深色模式下的默认border-width设为2px（如部分 Chromium 版本）
深色模式 + Flex 容器高度塌陷的连带问题
当 flex 容器内子项因深色模式边框变厚、内容撑高，而容器自身又被父级限制了 max-height 或设置了 align-items: stretch，就会出现“内容变高 → 容器被拉高 → 父容器溢出”的链式挤压。此时不能只调子项，要查三层：
- 当前 flex 容器是否意外继承了
height: 100%或max-height: 400px？删掉或改为min-height - 父容器是否是
display: grid或另一个display: flex，且设了align-items: center？这会让子 flex 容器被强制居中并截断高度 —— 改成align-items: start或加align-self: flex-start - 子项里有没有图片？深色模式下若没设
img { max-width: 100%; height: auto; }，图片原始尺寸会直接撑爆布局
真正难调试的，从来不是“怎么加深色模式”，而是“加完之后哪些旧样式开始互相打架”。Flex 只负责分空间，不负责猜你想要多厚的边框——所以每次切深色模式，都要当成一次完整的 layout regression test 来看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
