CSS Grid: How to make an area always on top of another area

Question

I want the area in red to always fit the content so that the area below (the commenting section) is always right after and not down below.

In chrome, it works, but not in Firefox (see picture).

I thought that by adding grid-template-rows: max-content; it will make it happen, but apparently not.

So, how to make the red area always fit the content so the commenting area is right after.

https://jsfiddle.net/mjb7cehy/

HTML and CSS

.gridAB {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "body" "aside" "comment";
  grid-gap: 40px;
}

@media screen and (min-width: 768px) {
  .gridAB {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: max-content;
    grid-template-areas: "body aside" "comment aside";
  }
}

.gridAB .aside {
  grid-area: aside;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
  align-content: flex-start;
}

.gridAB .body {
  grid-area: body;
  background-color: red;
}

.gridAB .album {
  background-color: pink;
}

.gridAB .credit {
  background-color: green;
}

.gridAB .version {
  background-color: yellow;
}

.gridAB .comment {
  grid-area: comment;
  background-color: #eee;
}

<div class="gridAB">
  <div class="body">body goes here</div>
  <div class="aside">
    <div class="album">album</div>
    <div class="credit">credits</div>
    <div class="version">version</div>
  </div>
  <div class="comment">comments go here</div>
</div>

Answer 1

Try

grid-template-rows: 0fr 1fr; 

will work: Please find updated example link: jsfiddle