Столбец Bootstrap, как прокручивать при переполнении?

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

Я хочу, чтобы все оставалось отзывчивым, как сейчас (где video_container реагирует в правильном соотношении, а video_container и chat_container имеют одинаковую высоту). но я не хочу, чтобы chat_container расширялся ниже по высоте, когда чаты заполняют пространство. Вместо этого я хочу, чтобы он прокручивался. Как это сделать?

Я установил для overflow-y: scroll идентификатор chat_container в <style></style>, потому что каким-то образом атрибут style исчезает при добавлении непосредственно к элементу (???), но это ничего не дает.

В голове у меня (обслуживает локально из скачанной копии):

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

javascript jquery html css bootstrap-4

13.12.2018 00:00

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это, создав свой собственный класс video-chat-row. Обратите внимание, что при использовании класса embed-responsive-16by9 нельзя ожидать, что классы row и col-x будут работать нормально. Вы должны создать свои собственные переопределения.

.video-chat-row {
  display: flex;
  width: 100%;
  position: relative;
}


#video_container {
  flex: 0 0 75%;
  background-color: black;
}

#chat_container {
  position: absolute;
  width: 25%;
  left: 75%;
  top: 0;
  bottom: 0;
  right: 0;
  overflow-y: scroll;
}

<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel = "stylesheet"/>
<body class='container-fluid mx-auto' style='width: 95%'>
<div class='video-chat-row'>

<div
    id='video_container'
    class='
        embed-responsive
        embed-responsive-16by9
        card card-body rounded-0 border-0' >
    <div id='player'></div>
</div>

<div
    id='chat_container'
    class='card card-body rounded-0'>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
    <p>Proin tincidunt aliquam efficitur. Cras laoreet in nulla id porttitor. Aliquam gravida, ex vulputate aliquam placerat, enim orci maximus turpis, ac lobortis quam urna eget nulla. In vel elit diam. Pellentesque fermentum a dolor sed venenatis. Praesent sit amet vulputate purus, vitae laoreet leo. Vivamus sed volutpat nunc. Nam nunc ex, auctor quis purus at, vulputate interdum enim. Maecenas non tincidunt purus, eget imperdiet lacus. Proin in dictum enim, vitae sodales tortor. Vivamus gravida finibus viverra. Nulla tempor vestibulum lorem. Morbi placerat blandit iaculis. Mauris cursus ex nibh, ornare gravida velit porta commodo. In sit amet mattis leo, at congue magna. Maecenas eu consectetur nulla.</p>
    <p>Quisque et lorem vitae nisi efficitur vehicula id vel nibh. Sed in felis tellus. Nulla viverra augue vel pretium tempus. Proin laoreet lectus ac nisl consectetur, sed mollis sem malesuada. Vivamus id lacinia erat, vel mollis eros. Ut aliquam pretium diam, ac efficitur ipsum aliquam ut. Nullam vel elit orci. Cras in malesuada nunc. Suspendisse elit lectus, tincidunt eu purus ac, consequat faucibus lacus. Sed aliquet risus ut ligula gravida, a lobortis massa pellentesque. In molestie ut sapien nec mollis. Proin a mattis diam, ut imperdiet risus. Donec id nulla massa. Donec nec mi non lacus ultricies pharetra. Morbi magna odio, sollicitudin ut lobortis at, tempus nec sem. Aliquam non ligula nec ante pharetra dapibus eu sed augue.</p>
    
</div>

</div>
</body>

Работал отлично, потратил столько часов на это, большое спасибо!

— 13.12.2018 01:46

После некоторого тестирования, похоже, это не работает в браузере Opera.

— 13.12.2018 03:31

Извините за повторное уведомление, при тестировании были ошибки. Это действительно отлично работает и в опере.

— 13.12.2018 04:04

13.12.2018 01:37