html - CSS 网格 : How to make an area always on top of another area

Question

我希望红色区域始终适合内容，以便下方区域(评论部分)始终紧随其后而不是下方。

在 chrome 中，它有效，但在 Firefox 中无效(见图片)。

我认为通过添加 grid-template-rows: max-content; 它会实现它，但显然不是。

那么，如何使红色区域始终适合内容，以便评论区域紧随其后。

https://jsfiddle.net/mjb7cehy/

HTML 和 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

尝试

grid-template-rows: 0fr 1fr; 

有效:请查找更新的示例链接:jsfiddle