Контейнер, использующий сетку, имеет высоту ноль

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;

У меня есть контейнер с вычисленным выше css, и я затем устанавливаю высоту на auto, чтобы он соответствовал содержимому своих дочерних элементов, но по какой-то причине высота остается равной 0.

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

Изменяется только при использовании height: 300px, но я не хочу устанавливать значение для высоты и настраивать его так, чтобы оно соответствовало высоте дочерних элементов.

Я пробовал "height : max-content "как предложено здесь: Расширение родителя

до высоты его потомков

Однако это не сработало. Есть ли что-то, что нужно сделать с контейнерами div, использующими display: grid?

Answer 1

Ваш код работает нормально:

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

Вы должны убедиться, что ваши дети действительно имеют конкретную высоту, определяемую содержимым. Опубликуйте ваши дочерние элементы, если это не поможет решить проблему, и я обновлю ответ.