Verwenden Sie justify-content: flex-end und vertikale Bildlaufleiste

Question

Ich habe Chat und ich muss den gesamten Inhalt nach unten scrollen. Ich möchte justify-content verwenden: flex-end und vertikale Bildlaufleiste haben.

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

Beispiel ist here.

Ist es möglich? Oder bitte geben Sie mir eine bessere Lösung.

Vielen Dank im Voraus!
Srdjan

Answer 1

Wahrscheinlich haben Sie bereits gelöst, aber ich konfrontiert dieses Problem auch und eine Lösung durch Versuch und Irrtum gefunden, also werde ich es teilen.

Nachdem Anzeige geordneten Containers gesetzt display: flex und Kinderartikel biegen ausrichten zu beugen-End align-items: flex-endoverflow-y: auto verhindern zu arbeiten.

Stattdessen können Sie verlassen Sie neben CSS-Eigenschaften für Ihre übergeordneten Container (in Ihrem Fall session-textchat) verwenden können:

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

Dies wird erscheinen Ihr Kind div auf der Unterseite des übergeordneten Container (es wird handeln wie flex-end) und vertikales Scrollen aktivieren, wenn die Inhaltshöhe größer ist als der des übergeordneten Containers.

Ich habe ein wenig jsfiddle für Sie, wenn dies verwirrend klingt: https://jsfiddle.net/lbartolic/9od4nruy/3/

In jsfiddle Sie Kopfteil, Content-Teil und Fußzeile zu sehen. Der Container hat eine feste Höhe und jeder Teil benötigt die erforderliche Höhe, um den Container zu füllen. Der Inhaltsteil _b__content ist scrollbar, wenn sein Inhalt größer als _b__content ist.

Ich hoffe, das wird jemandem helfen. Prost.

Answer 2

Es scheint ein häufiger Fehler unter den Browsern zu sein.

Sie sollten Ihren Stil auf 2 Container verteilen: der äußere wird gescrollt und der innere wird ein flexibler Container sein. Außerdem benötigen Sie einige js, um Ihre Nachrichtenliste beim Hinzufügen neuer Nachrichten nach unten scrollen zu lassen.

Hier ist ein Beispiel für den Code ein:

Markup:

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

Stil:

#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); 

In JS zeigt scrollable.scrollHeight die gesamte Höhe des Elements, einschließlich des Raums außerhalb seines sichtbaren Teils, während scrollable.clientHeight für die Höhe des sichtbaren Teils ist.

Answer 3

Ich musste mich nur selbst mit diesem Problem auseinandersetzen, und nachdem ich it is eine bug abgeschlossen habe, kam ich zu einem Workaround.

Zusammenfassend, verwenden Sie nicht justify-content: flex-end, sondern legen Sie eine margin-top: auto auf das erste Kind. Im Gegensatz zu flex-end wird dadurch die Scrollbar-Funktionalität nicht beeinträchtigt und der Inhalt wird unten ausgerichtet, wenn der Container nicht überläuft.

Beispiel basierte auf @ Geige SrdjanDejanovic der ist bei https://jsfiddle.net/peter9477/4t5r0t5b/

Falls das Beispiel nicht verfügbar ist, ist hier die entsprechende 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 */ 
} 

Eine alternative Lösung, die ich glaube, dass ich auch verwendet habe, ist um einen zusätzlichen Container für die Bildlaufleiste hinzuzufügen. Verwenden Sie das flexible Ende am inneren Behälter und lassen Sie den äußeren Behälter mit dem Scrolling umgehen. Im Allgemeinen mag ich keine Problemumgehungen, die das Hinzufügen von Dummy-Elementen erfordern, daher bevorzuge ich meine obige CSS-Lösung.