The min-content
in CSS grid apparently takes into account the full width of a <pre>
element content, even if you put max-width: 100%;
on it. Because the min of minmax()
wins, if you use min-content
as the minimum value of a grid-template-columns
column, it will go as wide as the <pre>
content regardless of the max value set. Also note that the column width value auto
behaves like minmax(min-content, max-content)
, and thus suffers the same problem.
In my case, going with a small fixed width, eg minmax(6em, 50em)
did basically what I wanted.