In my search, I've come across several questions that are somewhat similar but none quite address the exact issue at hand. While this question on Stack Overflow bears some resemblance, I am specifically looking to utilize a flex element instead of a static-size picture.
With the use of flexbox, my aim is to align a single element's height (cross-axis) with all other elements, and introduce a scroll option if the content in that particular element overflows, as opposed to expanding the container's height.
I have put together a straightforward example on JSFiddle to better illustrate my requirement.
Essentially, what I'm after is for the blue section to collapse and offer a scrollbar when it exceeds the length of the red section below, rather than stretching the flexbox vertically.
I've experimented with various solutions, and the closest result I could achieve was:
Adjusting the styling of ".element2" { min-height:0; height:0; } and ".body" { overflow-y:auto; }
though unfortunately, the outcome achieved can be observed by viewing the fiddle which does not allow scrolling, albeit the first element displays correctly.
Any assistance on this matter would be greatly appreciated, and I remain open to alternative methods besides using flexbox if there exists a simpler solution.
Below is the code from the initial fiddle demonstration:
.container{
display:inline-flex;
}
.element1{
background-color:red;
}
.element2{
min-width:180px;
}
.title{
background-color:green;
}
.body{
background-color:blue;
}<div class="container">
<div class="element1">
I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT. I WANT THIS ELEMENT TO CONTROL THE HEIGHT OF THE OTHER ELEMENT.
</div>
<div class="element2">
<div class="title">
v Needs scrollbar v
</div>
<div class="body">
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
Scroll Element <br/>
</div>
</div>
</div>