When does a column shrink under its max value?

Question

The first column is set to minmax(200px, 400px). I understand it's going to try and always be 400px 'when it can' and when it has to shrink the most it can shrink to is 200px.

When I start making the viewport extremely small it does shrink under 400px. My question is what determines when it shrinks under 400px?

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr 1fr;
}

.grid-container > div:nth-child(1) {
  background-color: red;
}

.grid-container > div:nth-child(2) {
  background-color: orchid;
}
.grid-container > div:nth-child(3) {
  background-color: yellowgreen;
}

<div class="grid-container">
  <div>I am column 1</div>
  <div>I am column 2</div>
  <div>I am column 3</div>
</div>

https://stackoverflow.com/q/52861086/3597276 – Michael Benjamin Jun 13 '20 at 11:44 — Michael Benjamin, Jun 13 '20 at 11:44

MilkyTech · Accepted Answer · 2020-06-09T22:43:26.523

2

1fr has a minimum width which is the width of the content. If the content has a fixed width, that is the minimum. If the content is text, the minimum is the width of the longest word (in this case, the word "column"). So here your first column will start to shrink below 400px when both of the 1fr columns have reached their minimum width and the width of the viewport starts to go below
(400px + column 2 min width + column 3 min width)

edited Jun 09 '20 at 22:43

answered Jun 09 '20 at 22:38

MilkyTech

1,919
2
15
39

Brilliant, thank-you. Do you know this from reading the W3C specs or maybe the MDN documentation? – tonitone106 Jun 09 '20 at 23:23
[https://university.webflow.com/article/the-fr-unit](https://university.webflow.com/article/the-fr-unit) – MilkyTech Jun 10 '20 at 00:30

When does a column shrink under its max value?

1 Answers1