Teaching step

flex-shrink: 0 is defensive CSS

EasySizingF26

Round avatars. On a narrow screen, next to a long message, they rendered as eggs — and only next to long messages, which took a week to notice.

A 56px avatar and a 400px message in a 420px line. They do not fit: there are 36px too many. Make the avatar stay exactly 56 × 56 and let the message absorb the whole shortfall, at this width and at every narrower one. Note that the avatar has border-radius: 50%, so "nearly 56" is visible — it stops being a circle.

Hint

Everything on this line is currently willing to give up space. Which of the two items should never have been asked?

Live preview700×300

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="chatline"><div class="avatar"></div><div class="msg"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.chatline { width: 420px; height: 80px; background: #16161d; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: #ffd166; }
.msg { width: 400px; height: 56px; border-radius: 8px; background: #7bdff2; }