demo https://jsfiddle.net/w4bj0km8/
Chciałbym aby boxy były ustawiane tak jak w aplikacjach czatowych. Od dołu okna do góry.
W elemencie parent musiałem dodać nowy sztuczny div ponieważ overflow:scroll nie współpracował z display:flex
Gdy pozbędę się tego sztucznego div'a to elementy układają się tak jak chcę - od dołu rodzica.
Niestety nie działa scroll gdy elementów jest więcej...
Możesz najpierw dodać element z paskiem przewijania, a dopiero później flexboxa
<div class="scroll">
<div class="flexbox">
<div class="msg">...</div>
<div class="msg">...</div>
<div class="msg">...</div>
<div class="msg">...</div>
<div class="msg right">...</div>
<div class="msg right">...</div>
</div>
</div>
.scroll {
height: 200px;
overflow-y: auto;
}
.flexbox {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 5px;
min-height: 100%;
}
.msg {
width: fit-content;
max-width: 70%;
padding: 8px 15px;
border: 1px solid #000;
border-radius: 5px;
}
.msg.right {
margin-left: auto;
}