Limiting Caption To Width Of The Image

How do I wrap the text in a figcaption when it reaches the right side of an image? Here is the pen: http://codepen.io/mjankowski/pen/pbzejy In the case above, the second figure ca

Solution 1:

One method would be to make your figure elements flex containers, and set their alignment to flex-direction: column. This would give you more control over the width of the entire element.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
.flex-figure-item {
  padding: 5px;
  margin-top: 10px;
  line-height: 10px;
  font-weight: bold;
  font-size: 1em;
      
  display: flex;           /* NEW */flex-direction: column;  /* NEW */width: 150px;            /* NEW */
}
figcaption {
  color: black;
}

<divclass="flex-container"><figureclass="flex-figure-item"><imgsrc="https://placehold.it/150x200"alt="placeholder"><figcaption>Short, John</figcaption></figure><figureclass="flex-figure-item"><imgsrc="https://placehold.it/150x200"alt="placeholder"><figcaption>WrapMe, Longname should not go past right side of image</figcaption></figure><figureclass="flex-figure-item"><imgsrc="https://placehold.it/150x200"alt="placeholder"><figcaption>Short, Sally</figcaption></figure></div>

Revised Codepen