Chat list messages can't scroll up using flexbox-CodePudding

I'm trying to make messages shows from bottom to top, like on whatsapp, you will see the latest messages and it will start from bottom and for older messages you need to scroll up.

I'm using display: flex; and justify-content: flex-end; which seems to display correctly (from bottom).

But the problem is that I can't scroll to top, it does not let me.

How can I fix this?

body {
  background-color: #000;
  height: 100%;
  width: 100%;
}

.box {
  width: 800px;
  height: 200px;
  background-color: lightblue;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  background: red;
}

.message {
  margin: 10px;
}

.message.player {
  background-color: #ccc
}

.message.me {
  background-color: lightgreen;
}

<body>
  <div >
  <div >
    <div >
      <span>Yesterday</span>
    </div>
    <div >
      <span>Message from friend 1</span>
    </div>
    <div >
      <span>Message from friend 2</span>
    </div>
    <div >
      <span>Message from friend 3</span>
    </div>
     <div >
      <span>Today</span>
    </div>
    <div >
      <span>Message from me 1</span>
    </div>
    <div >
      <span>Message from me 2</span>
    </div>
    <div >
      <span>Message from me 3</span>
    </div>
  </div>
</div>
</body>

CodePudding user response：

I can scroll pretty well in the run code snippet option

CodePudding user response：

It is because you are forcing your .container div to be of fixed height (i.e 100% of its parent). Remove the height: 100%; and overflow-y: auto; from .container and set overflow-y: auto; on your .box div.

body {
  background-color: #000;
  height: 100%;
  width: 100%;
}

.box {
  width: 800px;
  height: 200px;
  background-color: lightblue;
  overflow-y: auto;
}

.container {
  width: 100%;
/*   height: 100%;
  overflow-y: auto; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  background: red;
}

.message {
  margin: 10px;
}

.message.player {
  background-color: #ccc
}

.message.me {
  background-color: lightgreen;
}