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

查看：17
本文介绍了使用 justify-content: flex-end 并具有垂直滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

.session-textchat {高度:320px；背景:#fff;显示:-webkit-flex；显示:弹性；-webkit-align-items: flex-end;align-items: flex-end;-webkit-justify-content:间隔；对齐内容:间隔；-webkit-flex-direction: 列；弹性方向:列；}.session-textchat .past-messages {宽度:100%；最大宽度:980px；边距:0 自动；高度:83.92%；溢出-y:自动；填充:30px 0 0；显示:-webkit-flex；显示:弹性；-webkit-align-items: flex-end;align-items: flex-end;-webkit-justify-content: flex-end;justify-content: flex-end;-webkit-flex-direction: 列；弹性方向:列；}.session-textchat .past-messages .receiver,.session-textchat .past-messages .sender {宽度:100%；最小高度:47px；边距:0 0 20px；显示:-webkit-flex；显示:弹性；-webkit-flex-direction: 行；弹性方向:行；}.session-textchat .past-messages .receiver .message,.session-textchat .past-messages .sender .message {位置:相对；填充:17px；-moz-border-radius: 4px;-webkit-border-radius: 4px;边框半径:4px；}.session-textchat .past-messages .receiver {文本对齐:左；-webkit-justify-content: flex-start;justify-content: flex-start;}.session-textchat .past-messages .receiver .message {背景:#f4f4f4；颜色:#535353；}.session-textchat .past-messages .sender {文本对齐:右；-webkit-justify-content: flex-end;justify-content: flex-end;}.session-textchat .past-messages .sender .message {背景: url('../img/rgbapng/0050ff26.png');背景:RGBA(0, 80, 255, 0.15);颜色:#0050ff；}

<div class="过去的消息"><div class="receiver"><span class="message">下午好，大卫.欢迎您的预约！你今天怎么样?</span>
<div class="sender"><span class="message">医生您好.老实说我觉得很可怕.</span>

<div class="receiver"><span class="message">我可以从你的笔记中看出你一直有一些耳痛——你能告诉我更多关于你的症状吗?</span>

<div class="sender"><span class="message">医生您好.老实说我觉得很可怕.</span>

<div class="receiver"><span class="message">我可以从你的笔记中看出你一直有一些耳痛——你能告诉我更多关于你的症状吗?</span>

示例是这里.

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

提前致谢！
斯尔詹

解决方案

我只是不得不自己面对这个问题，并且在结束之后 这是一个错误，我想出了一个解决方法.

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

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

如果示例不可用，这里是相关的 CSS:

#container {溢出-y:自动；显示:弹性；flex-flow: 列 nowrap;/* justify-content: flex-end;请勿使用:中断滚动 */}#容器>:第一个孩子 {边距顶部:自动！重要；/* 使用 !important 防止子边距设置损坏 */}

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

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>

Example is here.

Is it possible? Or please give me better solution.

Thanks in advance!
Srdjan

解决方案

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

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.

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

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 */
}

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆