I have a main container named shelf2 and inside it, there are 2 sub-containers named dynamicShelf2Items and rightAdCon. The problem I have is I set shelf2 to have a height of auto so it responds to the height of the containers inside it but currently, shelf2’s height is being responsive to that of dynamicShelf2Items but rightAdCon is not getting into consideration so rightAdCon ends up getting out of bounding of shelf2. How can I make shelf2’s height respond to all elements inside it and take the height of the highest parent element inside it? So in this case rightAdCon has a larger height than dynamicShelf2Items so shelf2 should be responsive to that height therefore rightAdConwon’t get out of bound.

.shelf2 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: auto;
  background-color: pink;
}

.shelf2 .dynamicShelf2Items {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
  margin-top: 4%;
  left: 18%;
  width: 64%;
}

.shelf2 .dynamicShelf2Items .dynamicData {
  position: relative;
  width: 100%;
  height: 13em;
  cursor: pointer;
}

.shelf2 .dynamicShelf2Items .dynamicData .dynamicDataHoverHighlight {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 1.2%;
  height: 13em;
  background-color: rgb(3, 149, 3);
}

.shelf2 .dynamicShelf2Items .dynamicData .imgCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 0%;
  left: 1.5%;
  width: 30%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData img {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -100%;
  left: 32%;
  width: 62%;
  height: 100%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level1 p {
  position: absolute;
  left: 0%;
  font-size: 1.3vw;
  font-weight: 500;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 30%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level2 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 100%;
  height: 30%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level3 p {
  position: absolute;
  left: 0%;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 100%;
  height: 15%;
}

.shelf2 .dynamicShelf2Items .dynamicData .detailsCon .level4 p {
  position: absolute;
  left: 0%;
  font-size: 1.1vw;
  font-weight: 400;
  font-family: 'Roboto', sans-serif;
  margin-top: auto;
  margin-bottom: auto;
}

.shelf2 .rightAdCon {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: center;
  row-gap: none;
  position: absolute;
  top: 0%;
  right: 1%;
  width: 15%;
  height: 200rem;
  overflow: hidden;
  padding-top: 5%;
  background-color: red;
}

.shelf2 .rightAdCon .adCon {
  height: 25%;
}

.shelf2 .rightAdCon .adCon video {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf2">
  <div class="dynamicShelf2Items">
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div class="level2">
          <p>Apple · Mac · Grey</p>
        </div>
        <div class="level3">
          <p>US $1,999</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
    <div class="dynamicData">
      <div class="dynamicDataHoverHighlight">
      </div>
      <div class="imgCon">
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div class="detailsCon">
        <div class="level1">
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div class="level2">
          <p>Tufted · Leather · Wood</p>
        </div>
        <div class="level3">
          <p>US $5,700</p>
        </div>
        <div class="level4">
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div class="dynamicDataSeparator">
      </div>
    </div>
  </div>
  <div class="rightAdCon">
    <div class="adCon">
      <video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
    <div class="adCon">
      <video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&profile_id=165&oauth2_token_id=57447761" autoplay muted loop></video>
    </div>
  </div>
</div>