Can anyone explain why the image shifts to a new line when the dimensions of the bubble are restricted?
If I adjust the maximum width of the bubbles to calc(100% - 70px), the image stays on the same line, but the last word may break onto a new line, disrupting the design.
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 issue.
</div>
</div>
<div class="message message-right">
<span class="time">1 min ago</span>
<div class="bubble">
A brief note.
</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 very lengthy message, intended to be long enough to span multiple lines.
</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>