element getting out of bound of parent container-CodePudding

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 >
  <div >
    <div >
      <div >
      </div>
      <div >
        <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen Shot 2019-03-19 at 1_32_36 PM.png" />
      </div>
      <div >
        <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
        </div>
        <div >
          <p>Apple · Mac · Grey</p>
        </div>
        <div >
          <p>US $1,999</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
    <div >
      <div >
      </div>
      <div >
        <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      </div>
      <div >
        <div >
          <p>Modern U shaped Luxury Sofa</p>
        </div>
        <div >
          <p>Tufted · Leather · Wood</p>
        </div>
        <div >
          <p>US $5,700</p>
        </div>
        <div >
          <p>Used Once | Excellent Condition</p>
        </div>
      </div>
      <div >
      </div>
    </div>
  </div>
  <div >
    <div >
      <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 >
      <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 >
      <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>

CodePudding user response：

Soo. spent some time fixing your code. Please read carefully how I positioned the elements and what to use for that.

You will see that only 10% of the amount of css was actually needed to build this site. Don't use CSS attributes you don't understand.

One big mistake of yours was to use position: absolute;. This is not something you should be sloppy with. Back in 1999 this was maybe a thing but today, position:absolute; is only used in rare cases of overlapping content and advanced topics of css. Avoid it.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body{
  background-color: #eee;
}
.wrapper {
  display: grid;
  max-width: 1000px;
  margin: 0 auto;
  grid-template-columns: 1fr 0.2fr;
  width: 100%;
  background-color: pink
}

.big-font {
  font-size: 1.2rem;
  font-weight: bold;
}

.products {
  display: grid;
  padding: 1rem;
  grid-gap: 4rem;
}

.product {
  display: grid;
  grid-template-columns: auto 1fr;
}

.product img {
  margin-right: 1rem;
  width: 300px;
  border-radius: 1rem;
}

.product .detailsCon {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.product .detailsCon > * {
  margin-bottom: 1rem;
}

.ads {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

video {
 width: 100%;
}

<div >
  <div >
    <div >
       <img src="https://support.apple.com/library/APPLE/APPLECARE_ALLGEOS/SP790/Screen Shot 2019-03-19 at 1_32_36 PM.png" />
      <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p >US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div >
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p >US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div >
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p >US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div >
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p >US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
    <div >
       <img src="https://encrypted-tbn3.gstatic.com/shopping?q=tbn:ANd9GcSnkX1cceCzhok-fA2D5ShdGYEin2Br5zWnE_9lyssPXg_458B0ks7xhNaiVSjf9aVGhycCKlFVYxSR2wVzfGwRnso0fQwOXtKcK4fWXbw&usqp=CAE" />
      <div >
          <p>iMac 27-inches (2019) Retina 5K (4GB Graphics) in mint condition</p>
          <p>Apple · Mac · Grey</p>
          <p >US $1,999</p>
          <p>Used Once | Excellent Condition</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <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 >
      <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 >
      <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>

CodePudding user response：

Hmm.. .shelf2 has an absolute position. I'd put .shelf2 .dynamicShelf2Items into a grid and define the grid columns to be certain width (https://css-tricks.com/snippets/css/complete-guide-grid/).. You can use percentages or px. Inside each grid you can use flex if that's better for those child elements. Should not have any problems with height.