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>

例hereあります。

可能ですか？ または、より良い解決策を教えてください。

ありがとうございます！ Srdjan

Answer 1

は、おそらくあなたはすでにこれを解決してきましたが、私もこの問題に直面し、試行錯誤によって解決策を見つけたので、私はそれを共有するつもりです。

親コンテナの表示がフレックスに設定されていると、子供のアイテムがフレックスエンドalign-items: flex-endにアライメントされると、overflow-y: autoが動作しなくなります。

代わりに、あなたは（あなたのケースsession-textchatで）自分の親コンテナのための次のCSSプロパティを使用することができ残すことができます：

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

これはあなたの子供が親コンテナの下に表示されDIVようになります（それが動作しますflex-endのように）、コンテンツの高さが親コンテナより大きい場合は垂直スクロールを有効にします。これは混乱に聞こえる場合

私はあなたのために少しjsfiddleをした：jsfiddleで https://jsfiddle.net/lbartolic/9od4nruy/3/

を使用すると、ヘッダ部分、コンテンツの一部やフッターを見ることができます。コンテナの高さは固定されており、各パーツはコンテナを満たすのに必要な高さになります。コンテンツ部分_b__contentは、その内容が_b__contentの高さより大きい場合、スクロール可能です。

私はこれが誰かを助けることを望みます。 乾杯。

Answer 2

ブラウザ間でよくあるバグのようです。

2つのコンテナにスタイルを配布する必要があります。外側がスクロールされ、内側がフレックスコンテナになります。また、新しいメッセージを追加するときに、メッセージリストをスクロールしたままにしておくことが必要です。ここ

はコードの例である：

マークアップ：

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

自分自身でこの問題に直面していましたが、it isと答えた後、bugとしました。私は回避策を考え出しました。

要約すると、justify-content: flex-endを使用せず、最初の子にmargin-top: autoを入れてください。フレックスエンドとは異なり、これはスクロールバーの機能を損なうことはなく、コンテナがオーバーフローしていないときに内容をボトムアライメントします。

が

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

私は私も使用してきたと考えている代替回避策は次のとおりです。@ SrdjanDejanovicのフィドルに基づいて

例は一例が、ここでは関係CSS利用できますされていない場合にはhttps://jsfiddle.net/peter9477/4t5r0t5b/

でありますスクロールバーの余分なコンテナを追加します。内側のコンテナにフレックスエンドを使用し、外側のコンテナがスクロールを処理するようにします。私は一般的にダミー要素を追加する必要がある回避策を嫌いです。だから私は上記の私のCSSだけのソリューションを好む。