I have rooms with the chat-list_rooms class and a list of messages with the chat-message class. I need to when exceeding the body. I still do not understand how. Because the body itself is rubber and if you make it hidden, then the scrolls will not work as it should, that is, there will be no scrolling and the form for sending the message also disappeared within the hidden area.

/* Mixins */ /* Style */ html, body { font-family: 'Roboto Condensed', sans-serif; height: 100%; margin: 0; padding: 0; } input:focus { border: 1px solid #d8d8d8; outline: none; } i { cursor: pointer; } .chat-index { display: grid; margin: 0px 15%; grid-template-columns: 1fr 3fr; height: 100%; max-height: auto; border: 1px solid #d8d8d8; } .chat-index .chat-column-left { border-right: none; } .chat-index .chat-column-left .chat-profile { background: #dc3545; color: #fff; display: grid; grid-template-row: 20px 1fr; } .chat-index .chat-column-left .chat-profile_content { display: grid; justify-content: center; margin: 0 0 25px 0; } .chat-index .chat-column-left .chat-profile_content .avatar-user { width: 100px; height: 100px; border-radius: 50px; overflow: hidden; margin-bottom: 10px; } .chat-index .chat-column-left .chat-profile_content .avatar-user img { width: 100px; height: 100px; } .chat-index .chat-column-left .chat-profile_content .user-fullname { font-weight: bold; text-align: center; } .chat-index .chat-column-left .chat-list_search { position: relative; } .chat-index .chat-column-left .chat-list_search .search-icon { left: 5px; position: absolute; top: 10px; font-size: 19px; color: #a2a2a2; } .chat-index .chat-column-left .chat-list_search input { padding: 5px 15px 5px 25px; width: 100%; border-radius: 4px; box-sizing: border-box; height: 35px; border: 1px solid #d8d8d8; } .chat-index .chat-column-left .chat-list_search .close-icon { right: 0; position: absolute; top: 10px; font-size: 19px; color: #a2a2a2; display: none; } .chat-index .chat-column-left .chat-list_rooms { overflow: auto; } .chat-index .chat-column-left .chat-list_content { border: 1px solid #d8d8d8; display: grid; grid-template-columns: 65px 1fr; padding: 10px; } .chat-index .chat-column-left .chat-list_content .avatar { width: 50px; height: 50px; border-radius: 25px; border: 1px solid #d8d8d8; overflow: hidden; } .chat-index .chat-column-left .chat-list_content .avatar img { width: 65px; height: 65px; } .chat-index .chat-column-left .chat-list_content_description_body { display: grid; grid-template-columns: 2fr 1fr; } .chat-index .chat-column-left .chat-list_content_description_body_message { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .chat-index .chat-column-right { display: grid; grid-template-rows: 50px 5fr 50px; } .chat-index .chat-column-right .chat-info { display: grid; grid-template-columns: 5fr 1fr; padding: 5px 10px; background: #dc3545; color: #fff; } .chat-index .chat-column-right .chat-info_user_fullname { font-weight: bold; } .chat-index .chat-column-right .chat-info_user_last_visit { color: rgba(255, 255, 255, 0.8); } .chat-index .chat-column-right .chat-info_search { display: grid; align-content: center; } .chat-index .chat-column-right .chat-info_search_icon { text-align: right; } .chat-index .chat-column-right .chat-info_search_icon i { font-size: 20px; } .chat-index .chat-column-right .chat-message { border-left: 1px solid #d8d8d8; overflow: auto; } .chat-index .chat-column-right .chat-message_content { width: 50%; padding: 5px; margin: 10px; border-radius: 8px; } .chat-index .chat-column-right .chat-message_content.interlocutor-message { float: left; background: #d8d8d8; } .chat-index .chat-column-right .chat-message_content.own-message { float: right; border: 1px solid #d8d8d8; } .chat-index .chat-column-right .chat-message_content_date { text-align: right; font-size: 14px; color: #847979; } .chat-index .chat-column-right .chat-form { border: 1px solid #d8d8d8; align-items: center; } .chat-index .chat-column-right .chat-form_form { display: grid; grid-template-columns: 0.1fr 4fr 0.1fr; align-items: center; } .chat-index .chat-column-right .chat-form_form_attach { justify-content: center; align-items: center; margin: 5px; } .chat-index .chat-column-right .chat-form_form_attach:hover { color: #dc3545; } .chat-index .chat-column-right .chat-form_form_message { margin-right: 5px; } .chat-index .chat-column-right .chat-form_form_message textarea { width: calc(100% - 10px); border: 1px solid rgba(255, 255, 255, 0); outline: none; font-size: 15px; resize: none; } .chat-index .chat-column-right .chat-form_form_submit button { background: none; border: 1px solid rgba(255, 255, 255, 0); } .chat-index .chat-column-right .chat-form_form_submit button:hover { color: #dc3545; } 
 <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/> <div class="chat-index"> <div class="chat-column-left"> <div class="chat-profile"> <i class="material-icons">dehaze</i> <div class="chat-profile_content"> <div class="avatar-user"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="user-fullname">Петров Петр</div> </div> </div> <div class="chat-list"> <div class="chat-list_search"> <i class="material-icons search-icon">search</i> <input type="text" placeholder="Поиск" id="search"> <i class="material-icons close-icon">close</i> </div> <div class="chat-list_rooms"> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> </div> </div> </div> <div class="chat-column-right"> <div class="chat-info"> <div class="chat-info_user"> <div class="chat-info_user_fullname">Иван Иванов</div> <div class="chat-info_user_last_visit">Был в сети 34 минут</div> </div> <div class="chat-info_search"> <div class="chat-info_search_icon"> <label for="search"> <i class="material-icons">search</i> </label> </div> </div> </div> <div class="chat-message"> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> </div> <div class="chat-form"> <form action="#" class="chat-form_form"> <div class="chat-form_form_attach"> <i class="material-icons">attach_file</i> </div> <div class="chat-form_form_message"> <textarea placeholder="Введите текст"></textarea> </div> <div class="chat-form_form_submit"> <button> <i class="material-icons">send</i> </button> </div> </form> </div> </div> </div>
Here is the sandbox https://codepen.io/rusline/pen/dwPaGQ

    2 answers 2

    Your question is not very clearly written and the code on the preprocessor is inconvenient to read. Simplify the question, pliz. Then you can simplify the answer :)

    But it seems that you need to make the chat be the height of the full screen, and scrolling takes place inside the chat. Well, like chat in VKontakte, for example. Yes? I see two approaches to how this can be done.

    1) Starting from the html element and down to the window of the dialog ribbon, you use height everywhere : 100%; and where the feed begins, use overflow-y: scroll . This way you will create a scroll in the right place, and the main page scroll will turn off.

    2) It is more preferable to leave the message feed as the main content of the page and then this tape will be scrolled as usual. All other elements of the chat interface, in this case, do through position: fixed . Such items will not be scrollable.

      Made a fixed height through vh. That goes as it should

      Removed from .chat-column-right display:grid And fixed the height of the list of rooms &_rooms { overflow: auto; height: 55vh } &_rooms { overflow: auto; height: 55vh }

       /* Mixins */ /* Style */ html, body { font-family: 'Roboto Condensed', sans-serif; height: 100%; margin: 0; padding: 0; } input:focus { border: 1px solid 1px; outline: none; } i { cursor: pointer; } .chat-index { display: grid; margin: 0px 15%; grid-template-columns: 1fr 3fr; height: 100%; max-height: auto; border: 1px solid #d8d8d8; } .chat-index .chat-column-left { border-right: none; } .chat-index .chat-column-left .chat-profile { background: #dc3545; color: #fff; display: grid; grid-template-row: 20px 1fr; } .chat-index .chat-column-left .chat-profile_content { display: grid; justify-content: center; margin: 0 0 25px 0; } .chat-index .chat-column-left .chat-profile_content .avatar-user { width: 100px; height: 100px; border-radius: 50px; overflow: hidden; margin-bottom: 10px; } .chat-index .chat-column-left .chat-profile_content .avatar-user img { width: 100px; height: 100px; } .chat-index .chat-column-left .chat-profile_content .user-fullname { font-weight: bold; text-align: center; } .chat-index .chat-column-left .chat-list_search { position: relative; } .chat-index .chat-column-left .chat-list_search .search-icon { left: 5px; position: absolute; top: 10px; font-size: 19px; color: #a2a2a2; } .chat-index .chat-column-left .chat-list_search input { padding: 5px 15px 5px 25px; width: 100%; border-radius: 4px; box-sizing: border-box; height: 35px; border: 1px solid #d8d8d8; } .chat-index .chat-column-left .chat-list_search .close-icon { right: 0; position: absolute; top: 10px; font-size: 19px; color: #a2a2a2; display: none; } .chat-index .chat-column-left .chat-list_rooms { overflow: auto; height: 55vh; } .chat-index .chat-column-left .chat-list_content { border: 1px solid #d8d8d8; display: grid; grid-template-columns: 65px 1fr; padding: 10px; } .chat-index .chat-column-left .chat-list_content .avatar { width: 50px; height: 50px; border-radius: 25px; border: 1px solid #d8d8d8; overflow: hidden; } .chat-index .chat-column-left .chat-list_content .avatar img { width: 65px; height: 65px; } .chat-index .chat-column-left .chat-list_content_description_body { display: grid; grid-template-columns: 2fr 1fr; } .chat-index .chat-column-left .chat-list_content_description_body_message { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .chat-index .chat-column-right .chat-info { display: grid; grid-template-columns: 5fr 1fr; padding: 5px 10px; background: #dc3545; color: #fff; } .chat-index .chat-column-right .chat-info_user_fullname { font-weight: bold; } .chat-index .chat-column-right .chat-info_user_last_visit { color: rgba(255, 255, 255, 0.8); } .chat-index .chat-column-right .chat-info_search { display: grid; align-content: center; } .chat-index .chat-column-right .chat-info_search_icon { text-align: right; } .chat-index .chat-column-right .chat-info_search_icon i { font-size: 20px; } .chat-index .chat-column-right .chat-message { border-left: 1px solid #d8d8d8; overflow-y: scroll; height: 80vh; } .chat-index .chat-column-right .chat-message_content { width: 50%; padding: 5px; margin: 10px; border-radius: 8px; } .chat-index .chat-column-right .chat-message_content.interlocutor-message { float: left; background: #d8d8d8; } .chat-index .chat-column-right .chat-message_content.own-message { float: right; border: 1px solid #d8d8d8; } .chat-index .chat-column-right .chat-message_content_date { text-align: right; font-size: 14px; color: #847979; } .chat-index .chat-column-right .chat-form { border: 1px solid #d8d8d8; align-items: center; } .chat-index .chat-column-right .chat-form_form { display: grid; grid-template-columns: 0.1fr 4fr 0.1fr; align-items: center; } .chat-index .chat-column-right .chat-form_form_attach { justify-content: center; align-items: center; margin: 5px; } .chat-index .chat-column-right .chat-form_form_attach:hover { color: #dc3545; } .chat-index .chat-column-right .chat-form_form_message { margin-right: 5px; } .chat-index .chat-column-right .chat-form_form_message textarea { width: calc(100% - 10px); border: 1px solid rgba(255, 255, 255, 0); outline: none; font-size: 15px; resize: none; } .chat-index .chat-column-right .chat-form_form_submit button { background: none; border: 1px solid rgba(255, 255, 255, 0); } .chat-index .chat-column-right .chat-form_form_submit button:hover { color: #dc3545; } 
       <link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/> <div class="chat-index"> <div class="chat-column-left"> <div class="chat-profile"> <i class="material-icons">dehaze</i> <div class="chat-profile_content"> <div class="avatar-user"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="user-fullname">Петров Петр</div> </div> </div> <div class="chat-list"> <div class="chat-list_search"> <i class="material-icons search-icon">search</i> <input type="text" placeholder="Поиск" id="search"> <i class="material-icons close-icon">close</i> </div> <div class="chat-list_rooms"> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> <div class="chat-list_content"> <div class="avatar"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg"> </div> <div class="chat-list_content_description"> <div class="chat-list_content_description_header"> <span>Иван Иванов</span> </div> <div class="chat-list_content_description_body"> <div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span> </div> <div class="chat-list_content_description_body_time"> <span>10.12.2019</span> </div> </div> </div> </div> </div> </div> </div> <div class="chat-column-right"> <div class="chat-info"> <div class="chat-info_user"> <div class="chat-info_user_fullname">Иван Иванов</div> <div class="chat-info_user_last_visit">Был в сети 34 минут</div> </div> <div class="chat-info_search"> <div class="chat-info_search_icon"> <label for="search"> <i class="material-icons">search</i> </label> </div> </div> </div> <div class="chat-message"> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content interlocutor-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> <div class="chat-message_content own-message"> <div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div> <div class="chat-message_content_date"> 10.12.2019 </div> </div> </div> <div class="chat-form"> <form action="#" class="chat-form_form"> <div class="chat-form_form_attach"> <i class="material-icons">attach_file</i> </div> <div class="chat-form_form_message"> <textarea placeholder="Введите текст"></textarea> </div> <div class="chat-form_form_submit"> <button> <i class="material-icons">send</i> </button> </div> </form> </div> </div> </div>