Asked
Viewed17 times
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 rightAdCon
won’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>
lang-html