Container using the grid layout has a height of zero

Question

display: grid;
font-family: "Josefin Sans", sans-serif;
font-size: 10px;
height: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;

I have a container with the above calculated css, and I then set the height to auto so that it matches the content of its children, but for some reason the height remains at 0.

.slideshow {
    display: grid;
    position: relative;
    height: auto;
}

It only changes when I use height: 300px, but I don't want to set a value for height and make it so that it fits the height of the children.

I tried "height: max-content" as suggested here: Expanding a parent <div> to the height of its children

However, it didn't work. Is there something that needs to be done with div containers that uses display:grid?

lawrence-witt · Accepted Answer · 2020-04-12T21:25:55.947

Your code works fine:

.slideshow {
    display: grid;
    position: relative;
    height: auto;
    font-size: 20px;
}

<div class="slideshow">
  <div style="background-color: red;">Red</div>
  <div style="background-color: green;">Green</div>
  <div style="background-color: blue;">Blue</div>
  <div style="background-color: yellow;">Yellow</div>
  <div style="background-color: orange;">Orange</div>
</div>

You should make sure your chidren actually have a concrete height defined by the content. Post your child elements if this does not help solve it and I will update the answer.

Container using the grid layout has a height of zero

1 Answers1