flex-basis sets the starting size; flex-shrink, the squeeze.

flex-basis is the size a flex child starts at, like flex-basis: 200px. Then free space is shared out with flex-grow, or taken away when the row is too small.

Taking away is flex-shrink. Its default is 1, so every child squeezes. Set flex-shrink: 0 on anything that must keep its size, like a photo.

The flex shorthand sets all three in this order: grow, shrink, basis. flex: 0 0 64px means never grow, never shrink, start at 64px.

<div class="chat">
  <img class="face" src="cat.svg" alt="Pickles">
  <p>Has anyone seen my tuna? I left it right here by the sofa.</p>
</div>

.chat {
  display: flex;
  gap: 12px;
  align-items: center;
}
.face {
  flex: 0 0 64px;
}

On a narrow phone the words wrap onto more lines, but the face stays 64px wide.