Bootstrap4, как ограничить высоту прокручиваемого столбца до высоты адаптивного встраиваемого столбца?

Question

У меня макет начальной загрузки 4 с 3 столбцами, средний столбец имеет два вложенных столбцаОдин из них - встроенное видео на YouTube с адаптивным размером, а другой - список текста с полосой прокрутки. Я хочу установить высоту прокручиваемого столбца (красный фон) точно на высоту внедренного адаптивного видео и сделать его изменяемого размера и адаптивным; в случае недостаточной ширины устройства его следует свернуть ниже видео. Код здесь https://jsfiddle.net/h7f8r1ut/

Пожалуйста, предложите, если это может быть достигнуто без кода JavaScript.

Я смотрел на подобные вопросы, но не смог найти подходящего решения для моих точных требований.

.scroll {
  text-align: left;
  height: 40vh;
  overflow: hidden;
  overflow-y: scroll;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
  <div class="container-fluid">
    <div class="row">

      <div class="col-md-2 bg-dark text-info">
        left sidebar
      </div>
      <div class="col-md-8 bg-secondary">
        <div class="container-fluid">
          <div class="row">

            <div class="col-md-10" id="video">
              <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
              </div>
            </div>
            <div class="col-md-2 scroll bg-danger">
              <p>1</p>
              <p>2</p>
              <p>3</p>
              <p>4</p>
              <p>5</p>
              <p>6</p>
              <p>7</p>
              <p>8</p>
              <p>9</p>
              <p>10</p>
              <p>11</p>
              <p>12</p>
              <p>13</p>
              <p>14</p>
              <p>15</p>
              <p>16</p>
              <p>17</p>
              <p>18</p>
              <p>19</p>
              <p>20</p>
              <p>21</p>
              <p>22</p>
              <p>23</p>
              <p>24</p>
              <p>25</p>
              <p>26</p>
              <p>27</p>
              <p>28</p>
              <p>29</p>
              <p>30</p>
              <p>31</p>
              <p>32</p>
              <p>33</p>
              <p>34</p>
              <p>35</p>
              <p>36</p>
              <p>37</p>
              <p>38</p>
              <p>39</p>
              <p>40</p>
              <p>41</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-2 bg-dark text-info">
        right sidebar
      </div>
    </div>

  </div>
</div>

Answer 1

Вам необходимо поместить прокручиваемый контент в родительский элемент position:absolute, а затем установить overflow:auto в столбце. Существуют служебные классы для этого, включенные в Bootstrap 4.3 и новее.

              <div class="container-fluid">
                  <div class="row">
                        <div class="col-md-10" id="video">
                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen=""></iframe>
                            </div>
                        </div>
                        <div class="col-md-2 overflow-auto bg-danger">
                            <div class="position-absolute">
                                <p>1</p>
                                <p>2</p>
                                ....
                            </div>
                        </div>
                   </div>
              </div>

https://www.codeply.com/go/W0onIeqkRy

РЕДАКТИРОВАТЬ:

Если вы хотите, чтобы поведение прокрутки было только на экранах большей ширины(md и выше), вы можете использовать медиа-запрос:

@media (min-width: 768px) {
    .position-md-absolute {
        position: absolute;
    }
}