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.