Why does container-type: inline-size (for container queries) seem to break CSS grid's minmax(min-content, max-content)?

313 views Asked by At

I've got a CSS layout that relies upon CSS grid's minmax(min-content, max-content) for responsively laying out many of its elements. Here's a reduced example:

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;
}
<section>
  <article>
    <p>This is some text that is long enough to wrap. Resize me!</p>
  </article>
  <aside>
    Aside
  </aside>
</section>

I'd also like to make my UI widgets in those elements responsive to how much room they have available. However, when I use container-type: inline-size to an element that is sized as minmax(min-content, max-content) (or even any of its children), the responsive sizing breaks and the contents of the element get cut off. Here's a reduced example where you can toggle the behavior via a button:

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;
}
<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. Why does this happen?
  2. How can I achieve a layout that is responsive to elements' intrinsic size, but with container-width-adaptive widgets, without triggering this behavior?
0

There are 0 answers