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

问题

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.

来源：https://stackoverflow.com/questions/58978463/how-max-content-and-min-content-are-evaluated-for-a-row-aside-to-a-big-grid-area

标签

css

browser

css-grid