Do we need minmax in repeat

Question

I don't understand the difference between repeat(N, 1fr) and repeat(N, minmax(0, 1fr)).

They both works and so far I don't see why the former might leads to a problem.

As refer to https://css-tricks.com/you-want-minmax10px-1fr-not-1fr/

it doesn’t disappear on you and lead to more confusion

What are the circumstances he is trying to say? It seems that the latter lead to more confusion instead of the former.

Did you read the other, linked "blowout" post? The min-width of a flex or grid item is the size of its content, so if you want it to scale smaller than it's content you need to explicitly set a `min-width` in CSS. — morganney, Aug 30 '22 at 14:17
@morganney Nope, I don't. Would you mind giving an example because it's hard to understand with just theory... — dejitay836, Aug 30 '22 at 14:24
Then read the other post linked to from the article you mentioned, it has a great example. — morganney, Aug 30 '22 at 14:55

Bobby Morelli · Answer 1 · 2022-08-30T15:07:56.923

minmax(0,1fr) ensures content overflows in the child instead of the parent when there is not enough available space for each fraction to be at least the size of the largest item.

.nomin,.min{
  display: grid;
  grid-template-columns: 1fr;
  height: 8rem;
  background-color: #eee;
  border: #aaa solid;
  margin-bottom: 3rem;
  gap: .1rem;
}

.nomin>div,.min>div{
  background-color: #ccc;
}

.nomin {
  grid-template-rows: repeat(3,1fr);
}

.min {
  grid-template-rows: repeat(3,minmax(0,1fr));
}

<div class="nomin">
  <div>
    no minmax
  </div>
  <div>
    <textarea>evil element</textarea>
  </div>
  <div>
    text
  </div>
</div>

<div class="min">
  <div>
    minmax
  </div>
  <div>
    <textarea>evil element</textarea>
  </div>
  <div>
    text
  </div>
</div>

Do we need minmax in repeat

1 Answers1