为何container-type:inline-size会破坏CSS Grid的minmax(min-content,max-content)？

我用CSS Grid的minmax(min-content, max-content)实现了元素响应式布局，简化示例如下：

基础布局代码 #

CSS #

html, body { margin: 0; padding: 0; }
section {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr;
  inline-size: 100dvi;
  block-size: 100dvb;
  background: ivory;
}
article {
  background: lavenderblush;
  resize: horizontal;
  overflow-x: auto;
  max-inline-size: max-content;
  min-inline-size: min-content;
}
aside {
  background: lightcyan;
}

HTML #

<section>
  <article>
    <p>This is some text that is long enough to wrap. Resize me!</p>
  </article>
  <aside>
    Aside
  </aside>
</section>

我希望元素内的UI组件能根据可用空间自适应，但为设置了minmax(min-content, max-content)的元素（或其子元素）添加container-type: inline-size后，响应式布局失效，内容被截断，切换效果的简化示例如下：

带切换按钮的代码 #

CSS #

html, body { margin: 0; padding: 0; }
section {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr;
  inline-size: 100dvi;
  block-size: 100dvb;
  background: ivory;
}
article {
  background: lavenderblush;
  resize: horizontal;
  overflow-x: auto;
  max-inline-size: max-content;
  min-inline-size: min-content;
}
article.container {
  container-type: inline-size;
}
aside {
  background: lightcyan;
}

HTML #

<section>
  <article>
    <p>This is some text that is long enough to wrap. Resize me!</p>
    <button onclick="this.parentNode.classList.toggle('container')">Toggle Container</button>
  </article>
  <aside>
    Aside
  </aside>
</section>

请解答：

1. 该问题产生的原因是什么？
2. 如何实现兼顾元素内在尺寸响应性与容器宽度自适应组件的布局，避免此问题？

1. 问题产生的原因 #

当给article添加container-type: inline-size后，该元素会成为尺寸容器，此时浏览器计算它的min-content和max-content的逻辑发生了本质变化：

• 原本，minmax(min-content, max-content)会让Grid列根据article内部文本的自然换行/不换行尺寸自适应调整宽度，完全由内容驱动。
• 成为尺寸容器后，元素会触发contain: layout size的隐式规则，这会让它的尺寸计算独立于外部上下文，Grid无法再基于内容动态调整列宽。同时，尺寸容器的内在尺寸会被限制为当前可用空间，导致内容因空间不足被截断。

2. 解决方案：分离容器与内容尺寸逻辑 #

要同时保留Grid列的内容自适应特性和容器查询功能，需要把尺寸容器的作用范围与Grid列的尺寸计算对象拆分开，以下是两种可行方案：

方案一：给内部子元素添加尺寸容器 #

不在Grid列对应的article上设置container-type，而是在它的内部子元素（比如包裹文本的容器）上添加，让Grid列依然基于article的内容尺寸自适应：

/* 修改后的CSS */
html, body { margin: 0; padding: 0; }
section {
  display: grid;
  grid-template-columns: minmax(min-content, max-content) 1fr;
  inline-size: 100dvi;
  block-size: 100dvb;
  background: ivory;
}
article {
  background: lavenderblush;
  resize: horizontal;
  overflow-x: auto;
  max-inline-size: max-content;
  min-inline-size: min-content;
}
/* 给内部子元素添加容器类型 */
article .inner-container {
  container-type: inline-size;
}
aside {
  background: lightcyan;
}

<!-- 修改后的HTML -->
<section>
  <article>
    <div class="inner-container">
      <p>This is some text that is long enough to wrap. Resize me!</p>
    </div>
    <button onclick="this.previousElementSibling.classList.toggle('inner-container')">Toggle Container</button>
  </article>
  <aside>
    Aside
  </aside>
</section>

方案二：调整Grid列尺寸规则，保留容器查询 #

如果必须在article上设置尺寸容器，可以修改Grid列的尺寸规则，替换min-content/max-content为明确的范围值，避免内容被过度限制：

/* 修改后的CSS */
html, body { margin: 0; padding: 0; }
section {
  /* 改用minmax(最小宽度, auto)，让列宽度适应内容同时有下限 */
  grid-template-columns: minmax(200px, auto) 1fr;
  inline-size: 100dvi;
  block-size: 100dvb;
  background: ivory;
}
article {
  background: lavenderblush;
  resize: horizontal;
  overflow-x: auto;
  /* 保留容器类型 */
  container-type: inline-size;
}
aside {
  background: lightcyan;
}

这种方式下，Grid列有明确的最小宽度，auto会让列尽可能适配内容宽度，同时article作为尺寸容器的功能不受影响。

内容的提问来源于stack exchange，提问作者Kerrick