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

时间：2016-03-21 12:15:07

标签： css flexbox

我聊天了，我需要将所有内容滚动到底部。 我想使用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>

示例是here。

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

提前致谢！
斯尔詹

5 个答案:

答案 0 :(得分：26)

我自己不得不面对这个问题，在结束it is bug之后，我想出了一个解决方法。

总之，不要使用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解决方案。

答案 1 :(得分：20)

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

将父容器的显示设置为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的高度，则内容部分var postData = $('#frmMoveToNewPackage').serializeArray(); postData.push({ name: 'DocumentIds', value: _checkboxList.getAllChecked() }); $.post('@Url.Action("MoveToNewPackage")', postData); 将可滚动。

我希望这会对某人有所帮助。 欢呼声。

答案 2 :(得分：5)

还有另一个解决方案

删除justify-content并将flex: 1 1 auto;属性添加到第一个元素（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;
 }

答案 3 :(得分：2)

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

你应该将你的风格分配到2个容器上：外部将滚动，内部将是一个flex容器。此外，您需要一些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表示可见部分的高度。

答案 4 :(得分：1)

您必须将.session-textchat转换为弹性列，然后将margin-top: auto上的.past-messages传送到底部。然后使用overflow-y: scroll和一些jQuery：

function updateScroll() {
  $("#chat").animate({ scrollTop: $('#chat').prop("scrollHeight")}, 1000);
}
updateScroll();
$("#send_button").on('click', updateScroll);
.session-textchat {
  display: flex;
  flex-direction: column;
  height: 300px;
  margin-bottom: 30px;
  background: #fff;
  overflow-y: scroll;
}
.session-textchat .past-messages {
  margin-top: auto;
  width: 100%;
  max-width: 980px;
}
.session-textchat .past-messages .receiver,
.session-textchat .past-messages .sender {
  width: 100%;
  min-height: 47px;
  margin: 0 0 20px 0;
}
.session-textchat .past-messages .receiver .message,
.session-textchat .past-messages .sender .message {
  position: relative;
  padding: 15px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
.session-textchat .past-messages .receiver {
  text-align: left;
}
.session-textchat .past-messages .receiver .message {
  background: #f4f4f4;
  color: #535353;
}
.session-textchat .past-messages .sender {
  text-align: right;
}
.session-textchat .past-messages .sender .message {
  background: url("../img/rgbapng/0050ff26.png");
  background: rgba(0, 80, 255, 0.15);
  color: #0050ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div id="chat" 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>
  <div class="form-group">
    <textarea class="form-control" rows="5" id="msg"></textarea>
  </div>
  <div class="form-group text-center">
    <button href="#" id="send_button" class="btn btn-success">Send message</button>
  </div>
</div>

查看此全屏jsFiddle 。

相关问题
最新问题