Внешний div не может иметь собственную высоту

Question

У меня есть внешний div, который вызывает #slide, и в нем есть какое-то изображение.Каждое изображение имеет position: absolute; для автоматического изменения размера внутри #slide div.

Проблема в том, что когда я устанавливаю таким образом, высота #slide становится равной 0, тогда я не могу поместить содержимоениже дел.

Прямо сейчас текст выглядит как за изображением.Я хочу поместить текст под #slide.

Есть ли способы решить эту проблему?

#slide {
  position: relative;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}
#slide-list {
  margin: 0 auto;
  position: relative;
  width: 1170px;
  height: 100%;
  display: flex;
  flex-flow: row;
}
.slide-l-quarter {
  position: relative;
  width: calc(100% / 4);
  height: auto;
  margin: 0 5px;
}
.slide-l-quarter img {
  position: absolute;
  width: 100%;
  height: auto;
}
#text {
  font-size: 40px;
}

<section id="slide">
  <div id="slide-list">
    <ul class="slide-l-quarter">
	  <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
    <ul class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </ul>
  </div>
  <div id="text">
    Some Text
  </div>
</section>

Answer 1

   img {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }

добавить это к вашему CSS

Answer 2

Поскольку вы использовали позицию absolute для тегов img, она не добавляет высоты своему родителю.

Я удалил position: absolute из img, а также изменил ul на li, обернутый тегом ul.

#slide {
  position: relative;
  width: 100%;
  object-fit: cover;
  margin: 0 auto;
}

#slide-list {
  margin: 0 auto;
  position: relative;
  width: 1170px;
  height: 100%;
  display: flex;
  list-style: none;
}

.slide-l-quarter {
  position: relative;
  width: calc(100% / 4);
  height: auto;
  margin: 0 5px;
}

.slide-l-quarter img {  
  width: 100%;
  height: auto;
}

#text {
  font-size: 40px;
}

<section id="slide">
  <ul id="slide-list">
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
    <li class="slide-l-quarter">
      <img src="https://i.imgur.com/dsey4pc.jpg" alt="">
    </li>
  </ul>
  <div id="text">
    Some Text
  </div>
</section>