How to set the maximum width of a column in CSS Grid Layout?

Question

What I want to achieve:

Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width.

How I thought it would work:

div {    border-style: solid;  }    #container {    width: 300px;    height: 300px;    display: grid;    grid-template-columns: 1fr minmax(auto, 20%);  }

<div id="container">    <div>      some content    </div>    <div>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin    </div>  </div>

It looks good, but then when I remove the content of the second div, the left column does not collapse:

div {    border-style: solid;  }    #container {    width: 300px;    height: 300px;    display: grid;    grid-template-columns: 1fr minmax(auto, 20%);  }

<div id="container">    <div>      some content    </div>    <div></div>  </div>

My question:

I was under the impression that since minmax()

(...) defines a size range greater than or equal to min and less than or equal to max.

it would mean that in my case the width is set from auto (= 0 when the div is empty) to 20%. It however stays at 20%. Why is it so?

Answer 1

"The fit-content function accepts one param, the maximum value. A grid column/row with this property set will still take up as little space as necessary, according to its content, but no more than the maximum value."

See this article: Becoming a CSS Grid Ninja!

You can solve your case while still making use of percentage-based maximums:

div {    outline: 1px dotted gray;  }    .container {    width: 300px;    height: 300px;    display: grid;    grid-template-columns: 1fr fit-content(20%);  }    .container div {    overflow: hidden; /* this needs to be set so that width respects fit-content */  }

<div class="container">    <div>      some content    </div>    <div>      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin    </div>  </div>    <div class="container">    <div>      some content    </div>    <div></div>  </div>