我正在聊天，我需要将所有内容滚动到底部。
我想使用 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 https://jsfiddle.net/egzdhmgr/.
是否可以？或者请给我更好的解决方案。
我不得不自己面对这个问题，得出结论后it is https://bugzilla.mozilla.org/show_bug.cgi?id=1042151 a bug https://bugs.chromium.org/p/chromium/issues/detail?id=411624，我想出了一个解决方法。
总而言之，不要使用justify-content: flex-end而是放一个margin-top: auto关于第一个孩子。与 flex-end 不同，这不会破坏滚动条功能，并且当内容没有溢出容器时，它会底部对齐内容。
基于@SrdjanDejanovic's fiddle 的示例位于https://jsfiddle.net/peter9477/4t5r0t5b/ 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 解决方案。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
