I've been searching everywhere for a solution to this problem. My goal is to design a page with a video player on the left side and a chat on the right side. I am using the embed-responsive class for the video player so that it adjusts its size based on the screen. However, I am facing an issue with the chat box on the right. The overflow doesn't scroll properly, causing the right div to extend and the height of the left div to change.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0 mb-3">
<div class="row">
<div class="col-md-8 p-0">
<div class="embed-responsive embed-responsive-16by9">
<video controls>
<source src="#" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>
</div>
<div class="col-md-4 p-0">
<div class="bg-dark text-white h-100" style="overflow: scroll">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</div>
</div>