title: Container using the grid layout has a height of zero
body: <pre><code>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;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>.slideshow {
      display: grid;
      position: relative;
      height: auto;
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>I tried "height: max-content" as suggested here: <a href="https://stackoverflow.com/questions/384145/expanding-a-parent-div-to-the-height-of-its-children">Expanding a parent &lt;div&gt; to the height of its children</a></p>
  
  <p>However, it didn't work. Is there something that needs to be done with div containers that uses display:grid?</p>