title: element getting out of bound of parent container
body: <p>I have a main container named <code>shelf2</code> and inside it, there are 2 sub-containers named <code>dynamicShelf2Items</code> and <code>rightAdCon</code>. The problem I have is I set <code>shelf2</code> 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 <code>dynamicShelf2Items</code> but <code>rightAdCon</code> is not getting into consideration so <code>rightAdCon</code> 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 <code>rightAdCon</code> has a larger height than <code>dynamicShelf2Items</code> so <code>shelf2</code> should be responsive to that height therefore <code>rightAdCon</code>won't get out of bound.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="shelf2"&gt;
    &lt;div class="dynamicShelf2Items"&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen%20Shot%202019-03-19%20at%201_32_36%20PM.png" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Apple · Mac · Grey&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $1,999&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dynamicData"&gt;
        &lt;div class="dynamicDataHoverHighlight"&gt;
        &lt;/div&gt;
        &lt;div class="imgCon"&gt;
          &lt;img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&amp;usqp=CAE" /&gt;
        &lt;/div&gt;
        &lt;div class="detailsCon"&gt;
          &lt;div class="level1"&gt;
            &lt;p&gt;Modern U shaped Luxury Sofa&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level2"&gt;
            &lt;p&gt;Tufted · Leather · Wood&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level3"&gt;
            &lt;p&gt;US $5,700&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="level4"&gt;
            &lt;p&gt;Used Once | Excellent Condition&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="dynamicDataSeparator"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="rightAdCon"&gt;
      &lt;div class="adCon"&gt;
        &lt;video src="https://player.vimeo.com/external/401025531.sd.mp4?s=9b1bf00feea177c8d0d1d465b304a3d9c1ae0eee&amp;profile_id=165&amp;oauth2_token_id=57447761" autoplay muted loop&gt;&lt;/video&gt;
      &lt;/div&gt;
      &lt;div class="adCon"&gt;
        &lt;video src="https://player.vimeo.com/external/479498538.sd.mp4?s=a1436f498fa9be8a887062a98de2ec1eddaa6167&amp;profile_id=165&amp;oauth2_token_id=57447761" autoplay muted loop&gt;&lt;/video&gt;
      &lt;/div&gt;
      &lt;div class="adCon"&gt;
        &lt;video src="https://player.vimeo.com/external/394555897.sd.mp4?s=8f069cc18f74ecc7cad689223f65cf49990711f5&amp;profile_id=165&amp;oauth2_token_id=57447761" autoplay muted loop&gt;&lt;/video&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>