Bootstrap 4 - 2 столбца одинаковой высоты, один со свитком

Question

Я всюду искал решение этой проблемы.Я пытаюсь создать страницу с видеоплеером слева и чатом справа.Для видеоплеера я использую класс embed-responsive, поэтому размер видеоплеера изменяется в соответствии с представлением.У меня проблема с окном чата справа.Я не могу получить переполнение для прокрутки.Он просто расширяется и толкает правый div вниз, и его высота больше не равна левому div

<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>

Answer 1

Одним из решений вашей проблемы является добавление класса overflow-auto к col-4, обертывающего чат, и использование JQuery, чтобы установить высоту этой обертки равной высоте видео при загрузке документа.Также вам нужно будет настроить прослушиватель на $(window).resize() для повторного вычисления height при изменении размера окна.

Рабочий пример:

Примечание. Я изменил классы на col-8 иcol-4 чтобы вы могли видеть его без перехода в полноэкранный режим.

$(document).ready(function()
{
    $("#chatWrapper").height($("#myVideo").height());
    
    $(window).resize(function()
    {
        $("#chatWrapper").height($("#myVideo").height());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="container-fluid">
<div class="row">

  <div class="col-8">
    <div id="myVideo" class="embed-responsive embed-responsive-16by9">
      <video controls>
        <source src="#" type="video/mp4"/>
        Your browser does not support HTML5 video.
      </video>
    </div>
  </div>
  
  <div id="chatWrapper" class="col-4 overflow-auto">
    <div class="bg-dark text-white">
      <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>