.chat-client-body {
position: relative;
height: 260px;
}
.chat-client-conversation {
display: block;
position: relative;
padding: 0 12px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.chat-client-conversation__message {
position: relative;
display: block;
padding: 5px 0;
}
.chat-client-conversation__message-body {
position: relative;
display: inline-block;
padding: 10px 13px 8px 13px;
background: #dedede;
word-break: break-word;
}
<div class="chat-client-header"></div>
<div class="chat-client-body">
<div class="chat-client-conversation">
<div class="chat-client-conversation__message" id="message-23632">
<div class="chat-client-conversation__message-body">
<p>Текст первого сообщения</p>
</div>
</div>
<div class="chat-client-conversation__message" id="message-23633">
<div class="chat-client-conversation__message-body">
<p>Текст второго сообщения</p>
</div>
</div>
</div>
</div>
<div class="chat-client-footer"></div>
Делаю чат. При добавлении первых сообщений в тело чата (".chat-client-conversation") нужно их (сообщения - ".chat-client-conversation__message") прижимать к низу беседы. Использовать флекс нельзя. JS на самый крайний случай. Лучшим решением будет чистый CSS. Какие варианты есть?