<body class='container-fluid mx-auto' style='width: 95%'>
<div class='row'>
<div
id='video_container'
class='
embed-responsive
embed-responsive-16by9
card card-body rounded-0 border-0
col-9'>
<div id='player'></div>
</div>
<div
id='chat_container'
class='card card-body rounded-0 col-3'
style='overflow-y: scroll'>
</div>
</div>
</body>
To maintain the responsiveness of video_container and ensure that both video_container and chat_container have the same height without the chat_container expanding further below when filled with chats, you can set overflow-y: scroll in the CSS for the chat_container. It's important to note that the style attribute may sometimes disappear when added directly to an element.
In your local head file (downloaded copy), you should have the following:
<link rel='stylesheet' href='bootstrap.min.css'>
<script src='jquery-3.3.1.slim.min.js'></script>
<script src='bootstrap.min.js'></script>
<script src='popper.min.js'></script>