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)将把 child 1 插入 0px高度？
我想要的是当 child 为空或其中的元素被隐藏时，高度应为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>

第二个 child 应该是高度 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>