本文介绍使用 CSS 容器查询单位 100cqw 配合 max-width，使子元素在“收缩以适配内容”的父容器中仍能主动扩展至指定最大宽度，解决传统布局中 max-width 失效的问题。
本文介绍使用 css 容器查询单位 `100cqw` 配合 `max-width`，使子元素在“收缩以适配内容”的父容器中仍能主动扩展至指定最大宽度，解决传统布局中 `max-width` 失效的问题。
在响应式组件开发中，常遇到一类典型布局矛盾：父容器需“收缩包裹”其子内容（如使用 display: inline-flex 或 container-type: inline-size），而某个子元素又需“尽可能撑开至 max-width”，即使其自身文本内容很短。此时，仅设 max-width: 500px 往往无效——因为子元素默认按内容宽度收缩，max-width 仅起上限作用，不提供“最小扩张力”。
关键破局点在于：引入容器查询长度单位 cqw（container query width）。当父容器被声明为 container-type: inline-size 后，其内部子元素即可使用 100cqw 表示“占满当前容器可用行内方向宽度”，这与 100% 的行为有本质区别：100% 依赖于父元素的计算后宽度（可能因 flex/inline 特性未显式设定而为 auto），而 100cqw 直接锚定容器查询上下文的可用宽度，具备主动伸展能力。
✅ 正确实现方式如下：
.red-wrapper {
display: flex;
flex-direction: column;
align-items: center;
container-type: inline-size; /* 启用容器查询上下文 */
container-name: page-wrapper;
padding: 20px;
border: 1px solid red;
}
.green-dynamic-content {
max-width: 500px; /* 硬性上限：绝不超出 500px */
width: 100cqw; /* 主动伸展：占满当前容器可用宽度 */
box-sizing: border-box; /* 确保 padding/border 不溢出 max-width */
border: 1px solid green;
padding: 5px;
}
⚠️ 注意事项：
cqw单位仅在已声明container-type: inline-size（或size）的祖先容器内生效，且要求该容器本身具有明确的布局上下文（如flex、grid或块级流）；- 必须同时保留
max-width和width: 100cqw：前者控制绝对上限，后者驱动伸展行为；若仅用width: 100cqw，子元素将无条件占满容器宽度，失去尺寸约束；- 推荐添加
box-sizing: border-box，避免padding和border导致实际宽度突破max-width；- 当前浏览器支持度良好（Chrome 110+、Firefox 119+、Safari 16.4+），生产环境可安全使用。
此方案彻底解耦了“父容器自适应尺寸”与“子元素主动伸展”的需求冲突，是现代 CSS 容器查询赋能组件化布局的典型实践。
