html - CSS 网格布局行高为空时为 0px

Question

我有一个 html:

<div id="container">
    <div id="child1"></div>
    <div id="child2">
        <div id="fullpage"></div>
    </div>
    <div id="child3"></div>
</div>

和CSS:

#container {
    display:grid;
    grid-template-rows: minmax(0, auto) auto minmax(0,75px);
}

空的 child1 的高度将填充顶部屏幕和 child2 之间的间隙。我认为 minmax(0, auto) 会将子 1 插入 0px 高度？

我想要的是当子元素为空或者其中的元素被隐藏时，高度应该为0。

我怎样才能实现这个目标？

---

已编辑

#container-wrapper {
  display:grid;
  grid-template-rows: auto minmax(0,75px);
  height:100vh;
}

<div id="container-wrapper">
        <div id="pageContainer" style="background-color:red">
          <div>test</div>
        </div>
        <div id="tab-navigation" style="background-color:green">
          <!-- This should be 0px -->
        </div>
    </div>

第二个子元素的高度应为 0px。但这是错误的。

Answer 1

像下面这样做:

#container {
  display: grid;
  height:200px;
  margin:10px;
  border:1px solid red;
  grid-template-rows: auto 1fr auto;
}

#container  > * {
  border:1px solid;
}
#child3 {
  max-height:75px;
}

#fullpage {
  height:100%;
  background:green;
}

<div id="container">
  <div id="child1"></div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"></div>
</div>

<div id="container">
  <div id="child1"> some content <br> here</div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"></div>
</div>

<div id="container">
  <div id="child1"> some content <br> here</div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"> and also here </div>
</div>