Flex div 不显示溢出滚动条

Question

我有一个简单的 flex 容器，里面有标准的 div。问题是它从不显示溢出滚动条。我希望它垂直滚动。我只是输入更多字词，以便提交这个问题。

#chatBody {
  height: 170px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

<div id="chatBody">
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
  <div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
  </div>
</div>

Answer 1

#chatBody {
    height: 80px;
    position:relative;
    overflow-y:scroll;
    display: flex;
    min-height: 0;
    flex-direction: column-reverse; /* 'column' for start, 'column-reverse'       for end */
}

<div id="chatBody">
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div><div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
<div class="chat-msg">
    <div class="chat-msg-room"></div>
    <div class="chat-msg-user"></div>
    <div class="chat-msg-text">Disconnected from chat</div>
</div>
</div>

我使用了 flex-direction column-reverse 而不是 justify-content，因为 justify-content 可以防止溢出工作。让我知道这是否有帮助。

Answer 2

为了避免(not cure)column-reverse导致滚动无效的错误，您应该使用额外的flex（或不）容器来包装它。

一旦您使用了column-reverse，最后一个元素将首先显示在顶部，并且滚动条将在父包装器上需要的地方工作。

要最终在底部可视化地获得最后一个元素，您可以通过scale() 镜像整个容器并再次镜像每个子容器，使其再次可读。

注意：滚动将被反转，向下滚动滚轮将在屏幕上向上滚动......它是镜像的。

下面的演示

#chatBody {
  height: auto;/* reset */
  width: auto;/* reset */
  flex: 1;
  display: flex;
  flex-flow: column-reverse;/* reset preparing instead justify-content flex-end */
  transform: scale(1, 1);/* reset, children 1 after 1 will be set back to readable */
  counter-reset:div;/* demo purpose */
}
.chat-msg:before {
counter-increment:div;
content:counter(div)' - ';
float:left;color:red;
}
div[id] {
  overflow: auto;
  border: solid;
  height: 170px;
  flex-flow: column;
}

div[id],
.chat-msg {
  transform: scale(1, -1);/* visual mirroring */
}

.chat-msg {
  border-top: solid;
}

<div id>
  <div id="chatBody">
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user"></div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
    <div class="chat-msg">
      <div class="chat-msg-room"></div>
      <div class="chat-msg-user">last</div>
      <div class="chat-msg-text">Disconnected from chat</div>
    </div>
  </div>
</div>

如果你不想镜像容器，这个answer uses a javascript所以滚动已经一直到底部了，不需要涉及flex模型。