Question

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

我正在使用flexbox放置消息，并给窗口一个overflow-y: auto;。由于某种原因，我无法理解，这是行不通的。如果我从窗口上移开flex位置，则滚动正常且按预期进行。为什么Flexbox会改变滚动行为？

这是一个非常简单的codepen，可以显示问题： 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>

Answer 1

删除flex-direction: column-reverse，然后添加message而不是 column 方向。现在为.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>

 PushNotification.configure({
        onRegister: function(token) {
           alert(token.token) //works fine
       //shows an error this setState is not a function
           this.setState({token:token.token})
      //shows an error this this.sendToken.. is not a function
           this.sendTokenTOServer(token.token) 

        }
    });

自动溢出不适用于Flex容器

1 个答案: