I have a modal that already has a scroll if the general content exceeds the height of the modal. However, I now need to add a div inside the modal with its own scroll bar. The challenge is that I do not know the exact height of my modal as it is based on 30vh.
If I could simply set a fixed height for the inner div, it would be much simpler, but unfortunately that's not an option.
The problem at hand: I require a separate scroll bar for the right area within the modal.
.container {
max-height: 30vh;
border: 1px solid black;
overflow-x: hidden;
overflow-y: auto;
}
.header {
border: 1px solid red;
}
.body {
display: flex;
}
.leftArea {
border: 1px solid green;
width: 50%;
}
.rightArea {
border: 1px solid blue;
width: 50%;
overflow-x: hidden;
overflow-y: auto;
/* height: ???; */
}<div class="container">
<div class="header">
HEADER
</div>
<div class="body">
<div class="leftArea">
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
<p>left area</p>
</div>
<div class="rightArea">
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
<p>right area</p>
</div>
</div>
</div>Check out my example on CodePen.