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