Wyrównanie elementów do dołu rodzica

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