2017-12-29 9 views
3

Weiß jemand, warum das Bild auf eine neue Zeile bricht, wenn die Blasen Seiten eingeschränkt sind?Stil Pause auf Flexbox Chat

Wenn ich die Bubbles Max-Breite zu Calc (100% - 70px) ändern, bricht das Bild nicht, obwohl ich das letzte Wort auf einer neuen Zeile, die auch den Stil bricht, bekomme.

body { 
 
    background: #f0f3f6; 
 
} 
 

 
.messages { 
 
    width: 100%; 
 
    margin-top: 65px; 
 
    margin-bottom: 70px; 
 
    padding-bottom: 15px; 
 
} 
 

 
.scrolling { 
 
    display: inline-flex; 
 
    flex: auto; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
} 
 

 
.scrolled { 
 
    flex: 0 1 auto; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    justify-content: flex-end; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 15px; 
 
} 
 

 
.message { 
 
    line-height: 1em; 
 
    display: block; 
 
    margin: 18px 0; 
 
    position: relative; 
 
} 
 

 
.message .image { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 25px; 
 
} 
 

 
.message img { 
 
    display: block; 
 
    width: 100%; 
 
    border-radius: 150px; 
 
} 
 

 
.message .bubble { 
 
    font-weight: 300; 
 
    position: relative; 
 
    vertical-align: text-top; 
 
    display: inline-block; 
 
    font-size: 0.9em; 
 
    padding: 12px 14px; 
 
    margin-top: -16px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
    border-radius: 4px; 
 
    max-width: 100%; 
 
} 
 

 
.message .bubble::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 12px; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.message .time { 
 
    color: #838689; 
 
    font-weight: 500; 
 
    font-size: 0.7em; 
 
    position: absolute; 
 
    bottom: -1.9em; 
 
    width: 100%; 
 
} 
 

 
.message-left { 
 
    flex: 1; 
 
    align-self: flex-start; 
 
} 
 

 
.message-left .time { 
 
    left: 50px; 
 
} 
 

 
.message-left .bubble { 
 
    color: #343434; 
 
    background-color: #fff; 
 
    margin-left: 20px; 
 
} 
 

 
.message-left .bubble::after { 
 
    position: absolute; 
 
    left: -5px; 
 
    border-top: 5px solid transparent; 
 
    border-bottom: 5px solid transparent; 
 
    border-right: 5px solid #fff; 
 
} 
 

 
.message-right { 
 
    flex: 0; 
 
    align-self: flex-end; 
 
    float: right; 
 
} 
 

 
.message-right .time { 
 
    text-align: right; 
 
    right: 50px; 
 
} 
 

 
.message-right .bubble { 
 
    color: #fff; 
 
    margin-right: 20px; 
 
    background-color: #0084ff; 
 
} 
 

 
.message-right .bubble::after { 
 
    position: absolute; 
 
    right: -5px; 
 
    border-top: 5px solid transparent; 
 
    border-bottom: 5px solid transparent; 
 
    border-left: 5px solid #0084ff; 
 
}
<div ref="messages" class="messages scrolling"> 
 
    <div class="scrolled"> 
 
    <div class="message message-left"> 
 
     <span class="time">1 min ago</span> 
 
     <div class="image"> 
 
     <img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" /> 
 
     </div> 
 
     <div class="bubble"> 
 
     This message has the same problem. 
 
     </div> 
 
    </div> 
 

 
    <div class="message message-right"> 
 
     <span class="time">1 min ago</span> 
 
     <div class="bubble"> 
 
     A small comment. 
 
     </div> 
 
     <div class="image"> 
 
     <img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" /> 
 
     </div> 
 
    </div> 
 

 
    <div class="message message-right"> 
 
     <span class="time">1 min ago</span> 
 
     <div class="bubble"> 
 
     A really long message, designed to be big enough to create a multi-line comment. 
 
     </div> 
 
     <div class="image"> 
 
     <img src="https://scontent-lht6-1.xx.fbcdn.net/v/t1.0-9/15492548_1291266807563287_6299338365875926813_n.jpg?oh=b2c7a59d1666247350753be9002e6884&oe=5AB71F93" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Original JSFiddle

+0

Hallo Chris, könnte ich fragen, wie Sie den Code-Schnipsel zu bekommen geschafft zu arbeiten, konnte ich nicht den Pfosten schaffen aufgrund mehr Code als Beschreibung. –

+3

er hat mehr Ruf als du;) also kann er ohne die Beschränkung bearbeiten, die du hast –

+0

Was ist der Unterschied im Rendering, wenn du calc verwendest oder nicht (100% - 70px)? Ich konnte den Unterschied nicht erkennen? – orabis

Antwort

1

message Das Element ist display: block.

Wenn Sie stattdessen display: flex verwenden, werden das Bild und der Text gezwungen, in einer einzelnen Zeile zu bleiben (da die Standardeinstellung eines Flex-Containers flex-wrap: nowrap ist).

revised demo 1

Wenn Sie nicht wollen, die Bilder, schrumpfen flex-shrink: 0 auf die Elemente hinzuzufügen. (Flex-Elemente sind standardmäßig auf flex-shrink: 1 eingestellt, sodass sie verkleinert werden können, damit sie den Container nicht überlaufen lassen).

revised demo 2