CSS Grid Layout Row Height 0px When Empty

user_5022605 0
Viewed 1327

I have a html:

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

and css:

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

The empty child1 will have height filling the gap between the top screen and child2. I thought minmax(0, auto) will push child 1 into 0px height?

What I want is when the child is empty or the element inside it are hidden, the height should be 0.

How can I achieve this?

EDITED

#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>

The 2nd child should be height 0px. But this is wrong.

css-grid css html
1 Answers

do it like below:

#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>

user_86203330
Related