aaa

HTML

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>Arabian Nights</title>
  <meta name="description" content="TODO: Write description here">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="../css/game.css">
</head>

<body>
  <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>
    ...

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

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

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

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