使用justify-content:flex-end并使用垂直滚动条

Question

我聊天了,我需要将所有内容滚动到底部.我想使用justify-content:flex-end和垂直滚动条.

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

示例在这里.

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

提前致谢!
斯尔詹

Answer 1

我只是自己不得不面对这个问题,在得出结论是一个错误后,我想出了一个解决方法.

总之,不要使用justify-content: flex-end而是放在margin-top: auto第一个孩子身上.与flex-end不同,它不会破坏滚动条功能,并且当它们没有溢出容器时它会使内容对齐.

基于@SrdjanDejanovic小提琴的例子在https://jsfiddle.net/peter9477/4t5r0t5b/

如果示例不可用,这里是相关的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-only解决方案.

Answer 2

可能你已经解决了这个问题,但我也遇到了这个问题并通过反复试验找到了解决方案,所以我将分享它.

将父容器的显示设置为flex display: flex并将子项与flex-end对齐align-items: flex-end将阻止overflow-y: auto工作.

相反,您可以让您可以使用父容器的下一个CSS属性(在您的情况下session-textchat):

display: flex;
flex-direction: column-reverse; /* 'column' for start, 'column-reverse' for end */
overflow-y: scroll; /* or overflow-y: auto ... */

这将使您的子div显示在父容器的底部(它将起作用flex-end)并在内容高度大于父容器时启用垂直滚动.

如果这听起来令人困惑,我为你做了一个小小的问题: https ://jsfiddle.net/lbartolic/9od4nruy/3/

在jsfiddle中,您可以看到标题部分,内容部分和页脚.容器具有固定的高度,每个部件都需要高度来填充容器._b__content如果内容部分的内容高于_b__content高度,则内容部分将可滚动.

我希望这会对某人有所帮助.干杯.

Answer 3

这似乎是浏览器中的常见错误。

您应该将样式分配到 2 个容器上：外部将滚动，内部将是弹性容器。另外，您需要一些 js 来在添加新消息时使消息列表滚动到底部。

这是代码示例：

标记：

<div id='outer'>
    <div id='inner-scroll'>
        <div id='inner-flex'>
            <div class='flex-item'>Item 1</div>
            <div class='flex-item'>Item 2</div>
            ...
        </div>
</div>

风格：

#inner-scroll {
    height: 100%;
    overflow: auto;
}

#inner-flex {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100%;
}

.flex-item { /*nothing*/ }

JS：

function messagePushCallback()
{
    var scrollable=document.getElementById('inner-scroll');
    scrollable.scrollTo(0, scrollable.scrollHeight-scrollable.clientHeight);
}

// for an example
chat.onMessagePush(messagePushCallback);

window.addEventListener('load', messagePushCallback);

在JS中，scrollable.scrollHeight表示元素的整体高度，包括其可见部分之外的空间，而scrollable.clientHeight则为可见部分的高度。

Answer 4

也有另一个解决方案

删除justify-content和添加flex: 1 1 auto;属性到第一个element（create an empty div）

旧

的HTML

<div class="content-reversed">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

的CSS

.content-reversed {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

新

的HTML

<div class="content-reversed">
  <div class="fix"></div> //add this dummy div
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

的CSS

.content-reversed {
  display: flex;
  flex-direction: column;
}
.content-reversed .fix {
   flex: 1 1 auto;
 }