minmax, but not wider than parent container

[mhchem]

The CSS

grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));

works really great unless the parent container gets smaller than 30rem.

You can test here, by resizing the viewport with https://codepen.io/anon/pen/LmEyer

Basically, I am searching for something like

grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr));

or maybe

grid-template-columns: repeat(auto-fill, min-preferredmin-max(100%, 30rem, 1fr));

Meaning: Use a min of 30rem, but never exceed the parent's width.

Can this be achieved at all? How?

(Disclaimer: I also asked at https://stackoverflow.com/q/49919572/8772169 with to answer yet except for media queries that do not work when the parent is not 100% of the viewport)