aaa

HTML

<div id="flex-container">
    <div id="header"></div>
    <div id="column-flex-container">
      <div class="column side-column">
        <div id="chat">
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender: Message</div>
          <div class="message">Sender:...

CSS

#flex-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  min-width: 300px;
  flex: 1;
}

#header {
  /* height: 50px; */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  flex: 0 0 50px; /* new */
}

#column-flex-container {
  display: flex;
  /* flex-flow: row wrap-reverse; */
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
  flex-direction: row-reverse;
}

.column {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 300px;
  overflow: auto;
  background-color: aqua;
}

#chat {
  background-color: #ceecf5;
  flex-grow: 1;
  overflow: auto;
}

#main-column {
  flex: 1 1 auto;
  background-color: azure;
}

#footer {
  height: 50px;
  background-color: red;
  flex-shrink: 0; /* new */
}

html,
body {
  margin: 0;
  display: flex;
  height: 100vh; /* adjusted */
  flex-direction: column;
}