html - 溢出自动不适用于 flex 容器

<分区>

我正在尝试制作一个简单的聊天窗口，其中消息固定在窗口的右侧和底部。当消息溢出窗口时，我希望聊天窗口滚动。

我正在使用 flexbox 来定位消息，并为窗口提供 overflow-y: auto;。出于某种原因，我无法理解这是行不通的。如果我从窗口中移除 flex 定位，滚动将正常工作并按预期进行。为什么 flexbox 会改变滚动行为？

这是一个非常简单的代码笔，它显示了这个问题: 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>

最佳答案

删除 justify-content: flex-end 并添加 flex-direction: column-reverse 而不是 column 方向。现在为 message 添加一个 wrapper - 请参见下面的演示:

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

关于html - 溢出自动不适用于 flex 容器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54725223/

上一篇：coq - 教会数字

下一篇：database - 如何对一对多关系进行唯一约束？

相关文章：

html - 无法理解 CSS Sticky Footer!

html - 有没有办法删除 Chrome 在使用 <details> 标签时添加的三 Angular 形？

javascript - ReactJS html5 视频 - 如何捕获点击时的视频控件

javascript - 渐进式加载代码片段不太了解

css - Bootstrap - 如果列加起来不等于 12，则列居中

html - 如何将版权页脚定位到页脚的中心底部？

css - 垂直对齐 : middle in table-cell

javascript - 如何使 flexbox 元素填充剩余空间并滚动？

html - Flexbox div 未在 Chrome 中显示

css - 为什么在使用 Flexbox 时 overflow-x 会使 block 的宽度发生变化？