Skip to content
WebTricks

Media object (flexbox)

A figure or avatar beside text that wraps naturally — the classic flexbox media object.

  • flexbox
  • layout
  • media-object
  • avatar
  • component
Figure color#7c5cff
Gap16px
Figure size56px
HTML 
<div class="media"><div class="media__figure"></div><div class="media__body"><strong>Media object</strong><p>A fixed figure on the left, flexible text on the right that wraps as the box narrows.</p></div></div>
CSS 
:root {
    --accent: #7c5cff;
    --gap: 16px;
    --size: 56px;
}

.media {
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
    color: #fff;
}

.media__figure {
    flex: 0 0 var(--size);    /* fixed: don't grow or shrink */
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--accent);
}

.media__body {
    flex: 1;                  /* take the remaining width */
    min-width: 0;             /* allow long text to wrap, not overflow */
}

.media__body p { margin: 4px 0 0; opacity: 0.85; }

How it works

The media object is two flex children: a fixed figure and a flexible body.

  • flex: 0 0 var(--size) keeps the figure a constant size — it won’t grow or shrink.
  • flex: 1 lets the body fill the rest of the row.
  • min-width: 0 is the key trick: flex items default to min-width: auto, which refuses to shrink below their content and causes overflow. Setting it to 0 lets long words and text wrap correctly.
  • align-items: flex-start keeps the figure aligned to the top regardless of text length.

It’s the backbone of comments, list items, cards and notifications. More patterns in the Flexbox guide.