CSS 布局、尺寸与渲染边界

很多“明明设置了宽度却还是溢出”的问题，不是 width 失效，而是元素还有自动最小尺寸、内容贡献或定位上下文等约束。排查顺序应是：谁决定尺寸、谁允许收缩、内容如何参与计算、元素是否仍在正常流中。

Flex/Grid 子项不肯缩：min-inline-size: 0

Flex 子项在主轴上的 min-width: auto 通常会使用基于内容的自动最小尺寸，长单词、图片或内部不可换行内容因此可能把整行撑开。解决的是子项的最小尺寸，不是盲目增加 overflow: hidden：

.row {
  display: flex;
}

.row__main {
  min-inline-size: 0;
}

横向书写模式下，min-inline-size: 0 等价于 min-width: 0；逻辑属性更能表达“允许行内轴收缩”。如果问题发生在纵向主轴，对应检查 min-block-size。

来源：Flexbox 自动最小尺寸、CSS Logical Properties 的逻辑尺寸。

没有横向滚动条，不代表按钮没有被裁切

scrollWidth 衡量滚动区域宽度，不是“所有关键内容都可见”的断言。窄屏下，靠右对齐且不换行的按钮组可能伸到视口左侧；裁剪祖先又可能隐藏这部分内容。此时页面的 scrollWidth 仍可能等于视口宽度。

排查关键可见控件时，同时看截图、裁剪祖先和 getBoundingClientRect() 的左右边界，不能只检查页面总宽度。故意离屏的折叠菜单、动画中间帧和容器内正常滚动应单独判断。

动作组放不下时，可在对应断点允许换行并改为起点对齐：

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

核验于2026-10-30：浏览器窄屏中观察到总宽度正常而左侧按钮被裁切；改为换行后，关键按钮的边界都位于视口内，并复核了键盘入口。

补上 flex-wrap 前，先确认主轴

响应式旧规则可能仍设置着 flex-direction: column。此时新增 flex-wrap: wrap 是允许换成多列，并不保证按钮在水平方向放不下时向下换行；flex-basis 也沿主轴计算，不能把 100% 一律当成宽度。

若目标是横向排列、空间不足时另起一行，应在同一作用域明确 flex-direction: row 与 flex-wrap: wrap，再设置子项基准尺寸。若目标是单列纵向堆叠，则检查是否应保留 column、取消换列，并重设遗留的 flex-basis。以最终计算样式为准，不只看刚添加的规则。

核验于2026-11-02：在320像素浏览器视口观察到页面总宽度正常，但列主轴与换列叠加使动作按钮伸出裁剪卡片；明确行主轴后，按钮边界回到卡片内。该记录说明一次实际失配，不表示所有列布局都会溢出。

来源：CSS Box Alignment 的溢出对齐与内容不可达、CSSOM View 对 scrollWidth 的定义。

Grid 中 1fr 不一定等于“可以缩到 0”

轨道列表中直接写 1fr，其隐含最小值是 auto，也就是近似 minmax(auto, 1fr)。当内容的最小贡献较大时，轨道仍可能溢出。确实允许该列缩到零时写：

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

minmax(0, 1fr) 处理的是轨道最小值；内部 Grid/Flex 子项自身仍可能需要 min-inline-size: 0。

来源：CSS Grid 的轨道尺寸与 <flex> 隐含最小值。

min-content、max-content 与 fit-content()

这三个值把内容固有尺寸直接暴露给布局：

.popover {
  inline-size: fit-content(32rem);
  max-inline-size: calc(100vi - 2rem);
}

来源：CSS Sizing Level 3 的固有尺寸定义与取值。

响应式适配不能丢掉组件原有的宽度上限

组件可能用 width: 100% 配合 max-width: 420px 控制尺寸。直接覆盖成 max-width: calc(100vw - 32px) 会丢掉原来的 420px 上限，在较宽窗口中反而把小弹窗撑成横条。两个约束要一起保留：

.confirm-box {
  width: 100%;
  max-width: min(420px, calc(100vw - 32px));
}

• 组件库提供尺寸变量时，优先在 min() 中引用原来的设计变量，避免另写一份上限。例如 Element Plus 的 MessageBox 使用 --el-messagebox-width。
• 间距覆盖也要限制作用域：自有按钮组已经用 gap 时，可以只清掉该组直接子按钮的额外 margin；全局清零组件库相邻按钮的 margin，会让弹窗等依赖默认间距的按钮粘连。
• 默认态正确也要检查 hover、active 和焦点态。Element Plus 2.8.4 的文字按钮在悬停/按下时分别读取 --el-fill-color-light、--el-fill-color；为具体按钮设置这些局部变量，可以让库的状态规则直接使用目标颜色，避免普通自定义 hover 规则被更高优先级的库规则覆盖。此行为已用发布包 CSS 和真实鼠标悬停的计算样式验证。
• 验证时同时查看组件的原始样式、最终计算值和实际页面。来源：Element Plus 2.8.4 发布包的 MessageBox CSS（width: 100%、默认宽度变量 420px）与本地浏览器修复前后对照；核验于 2026-09-09。

原生控件样式要与组件库内部结构隔离

CSS 按最终 DOM 匹配，不会因为使用了 React 或 Vue 组件就自动隔离。下拉选择器内部也可能有原生搜索 input；裸 input 的高度、边框或内边距规则会命中它，导致控件内层超出外层、文字错位或焦点边界异常。

/* 只修饰自有原生表单，不命中组件库生成的输入层。 */
input[data-native-control] {
  min-height: 36px;
  padding: 7px 10px;
}

• 迁移组件库时清理过宽的原生选择器，并显式标记仍由应用管理的原生控件。库组件内部交给库管理；外观定制优先用主题 token、公开 variant 或语义化 styles，减少依赖旧版本内部类名。Ant Design Select API
• 核验于 2026-10-26：Ant Design 6.6.7 的 34px Select 内部搜索框被全局 min-height: 36px 撑高。隔离自有原生规则后，内层计算高度为 21px、最小高度为 0；同时验证了展开、搜索、键盘选择和弹窗内选择。尺寸数值属于该版本与主题下的实测，不是所有 Select 的固定值。

改 Grid 列定义不会隐藏元素

.card {
  grid-template-columns: 1fr;
  column-gap: 0;
}

这只把显式网格改成一列并移除列间距。原有子元素仍在 DOM 和布局中，自动放置时可能进入新的隐式行。响应式场景中应先用组件条件、display 等机制决定某个元素是否存在或可见，再调整剩余内容的轨道结构。

来源：CSS Grid 的显式轨道与自动放置、CSS Grid 自动放置算法。

aspect-ratio 只有在至少一个轴可自动计算时才有意义

.video {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
}

首选宽高比会参与自动尺寸计算；如果宽和高都已经是确定值，aspect-ratio 不会推翻它们。最小/最大尺寸约束仍可能让最终尺寸偏离比例。

来源：CSS Sizing Level 4 的 aspect-ratio。

object-fit 调整的是替换内容，不是元素盒子

图片或视频的元素盒子先由 width、height、aspect-ratio 等确定，object-fit 再决定内容怎样放进盒子：

.avatar {
  inline-size: 3rem;
  block-size: 3rem;
  object-fit: cover;
  object-position: 50% 30%;
}

• cover：保持比例并铺满，可能裁掉边缘。
• contain：保持比例并完整显示，可能留空。
• fill：直接拉伸到盒子尺寸，可能变形。
• scale-down：从 none 与 contain 中选择尺寸更小的结果。

来源：CSS Images Level 3 的 object-fit 与 object-position。

逻辑属性比物理方向更接近布局意图

逻辑方向会随 writing-mode 和文本方向映射，适合国际化组件。它不是“所有场景都必须替换 left/right”；当设计语义明确绑定物理屏幕方向时，物理属性仍然合理。

来源：CSS Logical Properties Level 1。

absolute 脱离正常流，sticky 依赖滚动上下文

绝对定位元素不会撑开父元素，也不会推开兄弟元素。上方正常流内容高度变化时，它不会自动维持与上方内容的间距；内容高度不固定的主体结构应优先留在正常流。

.toolbar {
  position: sticky;
  inset-block-start: 0;
}

sticky 至少要在目标轴设置一个非 auto 的 inset。它相对最近滚动容器的滚动端口调整位置，同时仍受其包含块边界限制；祖先意外形成滚动容器时，常会改变粘附参照物。

来源：CSS Positioned Layout Level 3 的定位模型与 sticky 定位。

浮层提示不占正文空间，但仍需选对挂载层

短暂的 toast 如果放在正常流里，出现时会把按钮和内容推开。position: fixed 脱离正常流，不为自身预留布局空间，适合独立的视口提示；但祖先的变换或包含规则可能改变其定位参照，不能只看到 fixed 就假定一定相对视口。MDN 定位规则

原生 <dialog> 用 showModal() 打开后进入浏览器顶层，弹窗及其后代之外的内容会变为不可交互。把提示固定挂在 body 并不断增大 z-index，不能代替顶层处理。一种做法是将弹窗关联的提示挂在当前模态弹窗内，普通页面提示再使用独立宿主，同时核验裁切、位置与读屏提示。MDN 模态弹窗行为

验证时比较提示前后关键元素的文档坐标，例如 getBoundingClientRect().top + scrollY，避免把浏览器自动滚动误认为布局位移。还应检查重复触发、自动关闭与卸载清理、焦点是否被抢走，以及窄屏边界。

2026-11-02 在浏览器中验证了固定提示前后按钮与输入框坐标不变，提示在原生弹窗打开时仍可见，320 像素视口没有横向溢出；这是对应实现的实测，不代表所有弹窗结构都可直接套用。

contain 是隔离边界，不是免费的性能开关

contain 限制后代对外部尺寸、布局、绘制或样式计算的影响：

.widget {
  contain: layout paint;
}

• layout 建立独立格式化上下文，并限制布局影响外溢。
• paint 裁切超出包含框的绘制，并建立绘制隔离。
• size 让元素的固有尺寸像没有内容一样计算；没有明确尺寸时可能得到意外的零尺寸或布局变化。
• content 等价于 layout paint style，不包含风险更高的 size。

只有组件确实能够独立布局时才添加包含约束，否则绝对定位、固有尺寸和溢出绘制都可能发生变化。

content-visibility: auto 需要尺寸占位

它允许浏览器跳过当前不相关区域的布局和绘制，适合很长、分区明确的页面：

.feed-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 20rem;
}

contain-intrinsic-size 为被跳过的内容提供估算尺寸，减少滚动条长度和页面位置跳动。不要对焦点、搜索、可访问性要求复杂的区域不加验证地使用；content-visibility: hidden 与 auto 的可访问性行为也不同。

来源：CSS Containment Level 2 的 contain、content-visibility 与 contain-intrinsic-size。

isolation: isolate 为组件建立明确的层叠边界

当组件内部有混合模式、负 z-index 或复杂叠层，但不希望它们和组件外部层叠上下文互相影响时：

.component-root {
  isolation: isolate;
}

它显式建立新的 stacking context。它不会让任意 z-index 穿透父级层叠上下文，也不修复错误的 DOM 层级；它的价值是让组件内部的层叠关系被封装。

来源：Compositing and Blending Level 1 的 isolation。