I want to address a specific issue I am facing with my div structure. Although it may seem similar to other questions on StackOverflow, none of the existing solutions have worked for me.
The problem is that I have two child divs inside a parent div. The height of Child-div-2 is fixed and it determines the height of the parent div.
My question is: How can I make Child-Div-1 adjust its size according to the height of Child-div-2 and the parent div?
To help visualize the situation, I have created a JSFiddle: https://jsfiddle.net/xandercrewz/hb7yvjw0/
Essentially, I would like the orange container to dynamically adjust its height to match the green and red containers.
Thank you for any assistance!
<div class='outer-container-blue'>
<div class='inner-container-left-orange'>
inner left
</div>
<div class='inner-container-right-red'>
<div class='inner-container-right-green'>
<div class='inner-container-right-child'>
inner1
</div>
<div class='inner-container-right-child'>
inner2
</div>
<div class='inner-container-right-child'>
inner3
</div>
</div>
</div>
</div>
CSS:
.outer-container-blue {
width: 800px;
height: auto;
background-color: blue;
}
.inner-container-left-orange {
display: inline-block;
float:left;
width: 15%;
background-color: orange;
height: auto;
}
.inner-container-right-red {
position: relative;
display: inline-block;
float:left;
width: calc(100% - 120px);
height: auto;
background-color: red;
}
.inner-container-right-green {
position: relative;
display: inline-block;
height: auto;
background-color: green;
left: 50%;
transform: translateX(-50%);
width: auto;
}
.inner-container-right-child {
display: inline-block;
width: 100px;
height: 25px;
margin: 10px;
background-color: yellow;
border: 5px solid black;
}