Прокрутка карты в Bootstrap

Question

Я пытаюсь добиться, чтобы оба поля были одинаковой ширины, то есть размер карточки слева (с изображением) всегда равен максимальной ширине карточки справа со списком.

Тогда желаемый результат будет равной ширины с полосой прокрутки для отсеченного содержимого левой карты.

Я попытался переполнить свойства CSS, однако они никогда не приводят к функционирующей полосе прокрутки,Я бы указал высоту в пикселях для карточки списка, и появилась бы полоса прокрутки, однако они не соответствовали бы высоте левой карточки.

Вы можете просмотреть мой пример ниже в полноэкранном режиме, поскольку проблема существует для немобильных устройств.просмотров.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />

<div class="container-fluid pt-1 pb-1" style="background: #eeeeee">
  <div class="row">
    <div class="col">
      <h2 class="text-center h2-special-gray text-center" style="color: #444!important; font-family: 'Source Sans Pro',sans-serif; padding-top:15px;">Meetings unlike any other</h2>
    </div>
  </div>
  <div class="container-fluid pt-4 pb-5">
    <div class="row mx-lg-2 mx-sm-0">
      <div class="col-md-8 col-sm-12 d-flex">
        <div class="card">
          <a href="my link here">
            <img class="card-img-top" src="https://place-hold.it/300x100/666/fff/000.gif" alt="Card image cap">
          </a>
          <ul class="nav nav-pills nav-fill navtop">
            <li class="nav-item px-sm-0">
              <a class="nav-link active" href="my link/">WELCOME</a>
            </li>
          </ul>
          <div class="card-body">
            <p class="card-text">
              <span class="lead">Here I am begin example</span> text text text text text text text text text text text text text text text text text texttext text texttext text texttext text texttext text texttext text texttext text texttext text texttext
              text texttext text texttext text texttext text text
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-12  d-flex ">
        <div class="card w-100">
          <div class="card-body" style="padding-left: 0!important; padding-right: 0!important; padding-top: 0!important;">
            <ul class="nav nav-pills nav-fill navtop">
              <li class="nav-item px-sm-0">
                <a class="nav-link active text-left" href="https://meetings.cshl.edu/">UPCOMING EVENTS</a>
              </li>
            </ul>

            <div class="position-absolute all-0 d-flex flex-column">
              <ul class="list-group list-group-hover d-flex overflow-auto" style="overflow-y: auto;">

                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
                <li class="list-group-item w-100">
                  <a id="event1" class="lead" href="link">Specific Event Name</a>
                  <br>
                  <i class="fa fa-calendar" aria-hidden="true"></i> Mon Mar 11 - Sun Mar 17 2019
                  <span id="" class="text-muted"></span>
                  <br>
                  <i class="fa fa-clock-o" aria-hidden="true"></i> Applications - Tue Jan 15 2019
                </li>
              </ul>
            </div>

            <div class="sidebar_item">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Мне удалось решить эту проблему, добавив в следующую строку служебный класс начальной загрузки 'h-100',

<div class="position-absolute all-0 d-flex flex-column w-100 h-100">