Why does grid-template-rows: n fr cause the actual height of child elements to be n*n fr? What causes this?

General
1 
* {}

.Shell {
  background-color: #0f0;
  width: 100px;
  display: grid;
  grid-template-rows: 0.5fr;
}

.Box {
  min-height: 0;
  border: 1px solid #f00;
  border-top: 0 !important;
}

.Box>div {
  height: 99px;
  width: 98px;
}

<div class="Shell">
  <div class="Box">
    <div></div>
  </div>
</div>

I want the box’s height to be half when using 0.5fr, with the border properly displayed, rather than the border appearing around 25px.

click “Run code snippet”, and you’ll notice that the border doesn’t align with expectations. Modifying grid-template-rows will show that the height of .Box seems to be influenced by fr twice.