Верстка чата. Расширение вложенного элемента

Question

Пытаюсь сверстать простой чат, который представляет из себя бутстраповскую карточку card. В card-body должны появляться сообщения. Проблема в том, что, когда сообщений становится много, card-body просто выходит за пределы родительского элемента. А хотелось бы, чтобы вместо этого появлялась полоса прокрутки. Как добиться такого результата?

Шаблон страницы: 
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>User page</title>

    <style>
        body {
            display: flex;
            flex-direction: column;
            height:100vh;
            margin: 0;
            padding: 0;
        }
    </style>

</head>
<body>

         <h1>General chat</h1>

         <br>

         <div class="card">
             <h3 class="card-header">Here you will see messages from all users</h3>
             <div class="card-body">
                 <div class="card" style="height: 390px; border-radius: 15px; background-color: rgba(0,0,0,0.08);">
                     <div class="card-body">
                        <!--Сообщения здесь-->                           
                     </div>
                     <div class="card-footer">
                         <form id="msgForm">
                             <div class="input-group">
                                 <textarea class="form-control" placeholder="Type your message..." rows="1">
                                 </textarea>

                                 <button type="submit" class="input-group-addon btn btn-primary" id="msgBtn">
                                     Send
                                 </button>
                                 </textarea>
                             </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script type="text/javascript" src="../static/userScript.js"></script>

</body>
</html>

Answer 1

Добавьте card-body свойство overflow: auto:

body {
    display: flex;
    flex-direction: column;
    height:100vh;
    margin: 0;
    padding: 0;
}
.card-body {
  overflow: auto;
}

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


         <h1>General chat</h1>

         <br>

         <div class="card">
             <h3 class="card-header">Here you will see messages from all users</h3>
             <div class="card-body">
                 <div class="card" style="height: 390px; border-radius: 15px; background-color: rgba(0,0,0,0.08); overflow: auto">
                     <div class="card-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos.  
                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                                                                                                                                                                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque harum reprehenderit quidem nesciunt aut consectetur adipisci, temporibus et quisquam! Obcaecati impedit, similique. Aperiam quaerat maiores, ipsa suscipit architecto perferendis quos. 
                     </div>
                     <div class="card-footer">
                         <form id="msgForm">
                             <div class="input-group">
                                 <textarea class="form-control" placeholder="Type your message..." rows="1">
                                 </textarea>

                                 <button type="submit" class="input-group-addon btn btn-primary" id="msgBtn">
                                     Send
                                 </button>
                              </div>
                         </form>
                     </div>
                 </div>
             </div>
         </div>

БЛОГ НА HUSL

Верстка чата. Расширение вложенного элемента

Ответы (1 шт):