How max-content and min-content are evaluated for a row aside to a big grid-area in CSS grid?

Question

According to MDN docs (https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows):

min-content

Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

So, in this example:

.grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: max-content max-content max-content min-content;
  grid-template-areas:
    "one aside"
    "two aside"
    "three aside"
    "four aside"
}

.one {
  background: red;
  grid-area: one;
}

.two {
  background: green;
  grid-area: two;
}

.three {
  background: blue;
  grid-area: three;
}

.four {
  background: yellow;
  grid-area: four;
}

.aside {
  background: grey;
  grid-area: aside;
}

<div class="grid">
  <div class="one">
    One
  </div>
  <div class="two">
    Two
  </div>
  <div class="three">
    Three
  </div>
  <div class="four">
    Four
  </div>
  <div class="aside">
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
    Aside <br>
  </div>
</div>

What is the height value evaluated for the fourth row in order to get the "min-content" value? What is the height of the fourth row of the aside grid-area that min-content evaluates?

https://jsfiddle.net/oygf360r/

EDIT after @temani-afif comments:

In order to clarificate the question. I understand the behaviour of min-content in this case. What I'd like to know, is how the browser computes this value since the second column doesn't have any content in that row, because the content of the aside column belongs to all rows. Does the browser just ignore the aside column in this case for the comparison? Or do these elements have any special value?

I'm labelling it as browser also, because maybe it's more related to it.

Answer 1

If i'm not wrong, it's an edge case, the situation is due to how elements on multiple Grid Tracks are handled (by the browser implementation of the specification) to determine grid sizing.

In your example the algorithm to determine row allocated space failed to satisfy the repartition according to the grid-template-rows property value, so in Chrome currently (December 2021) all rows are set to auto:

If you set at least one row to 1fr, the algo dispatch correctly the space between the rows :

Difference between browsers to handle the issue:
(Currently Firefox do the same as Google Chrome)