使用justify-content：flex-end和垂直滚动条 [英] Use justify-content: flex-end and to have vertical scrollbar

问题描述

我有聊天，我需要将所有内容滚动到底部。
我想使用justify-content：flex-end和垂直滚动条。

I have chat and I need to scroll all content to bottom. I want to use justify-content: flex-end and to have vertical scrollbar.

.session-textchat {
  height: 320px;
  background: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.session-textchat .past-messages {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  height: 83.92%;
  overflow-y: auto;
  padding: 30px 0 0;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.session-textchat .past-messages .receiver,
.session-textchat .past-messages .sender {
  width: 100%;
  min-height: 47px;
  margin: 0 0 20px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.session-textchat .past-messages .receiver .message,
.session-textchat .past-messages .sender .message {
  position: relative;
  padding: 17px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.session-textchat .past-messages .receiver {
  text-align: left;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.session-textchat .past-messages .receiver .message {
  background: #f4f4f4;
  color: #535353;
}
.session-textchat .past-messages .sender {
  text-align: right;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.session-textchat .past-messages .sender .message {
  background: url('../img/rgbapng/0050ff26.png');
  background: rgba(0, 80, 255, 0.15);
  color: #0050ff;
}

<div class="session-textchat">
  <div class="past-messages">
    <div class="receiver">
      <span class="message">
            Good afternoon David. Welcome to your appointment! How are you today?
          </span>
    </div>
    <div class="sender">
      <span class="message">
            Hello doctor. I feel terrible to be honest.
          </span>
    </div>
    <div class="receiver">
      <span class="message">
            I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
          </span>
    </div>
    <div class="sender">
      <span class="message">
            Hello doctor. I feel terrible to be honest.
          </span>
    </div>
    <div class="receiver">
      <span class="message">
            I can see from your notes that you've been having some ear ache - can you tell me a bit more about your symptoms?
          </span>
    </div>
  </div>
</div>

a href =https://jsfiddle.net/egzdhmgr/ =nofollow>此处。

Example is here.

有可能吗？
或者请给我更好的解决方案。

Is it possible? Or please give me better solution.

提前感谢！ $ b $bÚ
Srdjan

Thanks in advance!
Srdjan

推荐答案

我只是自己面对这个问题， 这是 a 错误，我想出了一个解决方法。

I just had to face this issue myself and, after concluding it is a bug, I came up with a workaround.

不要使用 justify-content：flex-end ，而是在第一个孩子上放置一个 margin-top：auto 。与flex-end不同，这不会打破滚动条的功能，并且当它们不会溢出容器时，它会使内容对齐。

In summary, don't use justify-content: flex-end but rather put a margin-top: auto on the first child. Unlike flex-end this doesn't break the scrollbar functionality, and it bottom-aligns the contents when they're not overflowing the container.

基于@ SrdjanDejanovic的小提示位于 https://jsfiddle.net/peter9477/4t5r0t5b/

Example based on @SrdjanDejanovic's fiddle is at https://jsfiddle.net/peter9477/4t5r0t5b/

如果示例不可用，那么这里是相关的CSS：

In case the example isn't available, here's the relevant CSS:

#container {
    overflow-y: auto;
    display: flex;
    flex-flow: column nowrap;
    /* justify-content: flex-end; DO NOT USE: breaks scrolling */
}
#container > :first-child {
    margin-top: auto !important;
    /* use !important to prevent breakage from child margin settings */
}

我相信我也使用的另一种解决方法是为滚动条添加一个额外的容器。使用内部容器上的flex-end，并使外部容器处理滚动。我一般不喜欢需要添加哑元素的解决方法，所以我更喜欢我上面的CSS纯解决方案。

An alternative workaround that I believe I've also used is to add an extra container for the scrollbar. Use the flex-end on the inner container and have the outer container handle the scrolling. I generally dislike workarounds that require adding dummy elements though, so I prefer my CSS-only solution above.

这篇关于使用justify-content：flex-end和垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！