How is 1fr evaluated for rows when grid container has no explicit height?

Question

Every definition of 1fr unit that I find says something like:

The new fr unit represents a fraction of the available space in the grid container.

source: here

This makes sense when the height of the grid container is explicitly defined, for example when using

.grid-container {
display: grid;
height: 500px;
}

But when the grid container has no height set, the definition from above does not make sense anymore. There is no more available space left, since the grid container's height should be as high as its content.

I cannot figure out a rule based on which 1fr is computed in this scenario. Here is a code snippet where 1fr simply becomes equal to the height of the first row's item.

Questions:

Why is 1fr in this scenario equal to the height of the first item? (see my code snippet)

How is 1fr computed in the scenario where grid container has no height set?

Do you know of any official docs which describe this scenario? I couldn't find any.

What I would have expected to happen:

since grid container has no height set, I would have expected the height of the content of each row to be summed up then divided by the sum of FRs used inside grid-template-rows.

First row's max height is 100px (explicitly set by .item class)

Then the second row's max height is somewhere around font size height.

This would lead to (100 + something Small) / 3 = around 30px

Thus 1fr should have been around 30px.

But 1fr is evaluated to 100px as you can see in my code snippet.

.main {

  background-color: pink;
  min-height: 100vh;

}

.item {
  height: 100px;
}
#wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 2fr;
}

#wrapper {
  border: 2px solid #f76707;
  
}

#wrapper > div {
  border: 2px solid #ffa94d;
}

<div class="main">
  <div id="wrapper">
    <div class="item">One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>
</div>