2017-12-29 15 views
3

気泡の辺が拘束されているときに、画像が新しいラインに壊れてしまう理由を知っていますか?フレックスボックスチャットのスタイルブレーク

気泡の最大幅をcalc(100%〜70px)に変更すると、新しい行に最後の単語が表示されますが、スタイルが壊れます。

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

こんにちはクリスは、私はあなたが、私が原因の説明よりも多くのコードにポストを作成することができませんでした動作するようにコードスニペットを取得するために管理方法を求めることができます。 –

+3

彼はあなたよりも評判が高いです;)彼はあなたが持っているリミエーションなしで編集することができます –

+0

calc(100%〜70px)を使用するか使用しない場合のレンダリングの違いは?私はその違いを伝えることができませんでしたか? – orabis

答えて

1

message要素がdisplay: blockあります。

代わりにdisplay: flexを使用すると、フレックスコンテナのデフォルト設定がflex-wrap: nowrapであるため、画像とテキストは強制的に1行に残ります。

revised demo 1

あなたはアイテムにflex-shrink: 0を追加し、画像を縮小したくない場合。 (デフォルトでは、フレックスアイテムはflex-shrink: 1に設定されているため、コンテナがオーバーフローしないように縮小できます)。

revised demo 2

関連する問題