Overflow auto is not working with flex container [duplicate]

问题: This question already has an answer here: Scrollable div to stick to bottom, when outer div changes in size 5 answers I'm trying to make a simple c...

可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:

问题:

This question already has an answer here:

Scrollable div to stick to bottom, when outer div changes in size 5 answers

I'm trying to make a simple chat window where the messages are anchored to the right, and bottom of the window. I want the chat window to scroll when messages overflow out of the window.

I'm using flexbox to position the messages, and giving the window an overflow-y: auto;. For some reason that I cannot understand this does not work. If I remove the flex positioning off the window, scrolling works normally and as expected. Why is flexbox changing the scroll behavior?

Here's a very simple codepen that shows the problem: https://codepen.io/skypod/pen/OdavbR

.chat-window {
  background-color: grey;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  overflow-y: auto;
}

.message {
  background-color: blue;
  color: white;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="chat-window">
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
  <div class="message">text</div>
</div>

回答1:

Remove justify-content: flex-end and add flex-direction: column-reverse instead of column direction. Now add a wrapper for the messages - see demo below:

.chat-window {
  background-color: grey;
  width: 400px;
  height: 400px;
  display: flex;
  flex-direction: column-reverse; /* CHANGED */
  /*justify-content: flex-end;*/
  align-items: flex-end;
  overflow-y: auto;
}

.message {
  background-color: blue;
  color: white;
  padding: 0.5rem;
  margin: 0.25rem;
}

<div class="chat-window">
  <div class="message-wrapper">
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
    <div class="message">text</div>
  <div>
</div>