Outer div can't has its own height

Question

I have a outer div that calls #slide and it has some image in it. Each images have position: absolute; for resizing themselves automatically inside of the #slide div.

The problem is when I set like that, the #slide‘s height becomes 0 then I can’t put the contents below the div.

Right now the text looks like behind the image. I want to put the text under the #slide.

Is there any ways to fix this problem?

#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

As you used absolute position for img tags, it does not contribute any height to its parent.

I removed the position: absolute from the img & also change your ul to li wrapped by an ul tag.

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