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>
こんにちはクリスは、私はあなたが、私が原因の説明よりも多くのコードにポストを作成することができませんでした動作するようにコードスニペットを取得するために管理方法を求めることができます。 –
彼はあなたよりも評判が高いです;)彼はあなたが持っているリミエーションなしで編集することができます –
calc(100%〜70px)を使用するか使用しない場合のレンダリングの違いは?私はその違いを伝えることができませんでしたか? – orabis