CSS: make text break at image width

Question

I have a horizontal scrolling image gallery, using this npm package.

I have images of the same height and variable width next to each other and for some of them I want to add text below. I don't want the text to become wider than the image. What's the best way to do that? The images should remain the same height each, all text would be added below.

I've simplified things a bit for this question and prepared a jsfiddle where I try to employ the first solution from here. Doesn't work though.

EDIT: I now realise I had a bracket in the wrong place in my jsfiddle, now it works:

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
 }  

  .card {
    flex: 0 0 auto;
    width: -moz-min-content;    /* Firefox/Gecko */
    width: -webkit-min-content; /* Firefox/Gecko */    
    width: min-content;
}

I had:

    .scrolling-wrapper-flexbox {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
    
      .card {
        flex: 0 0 auto;
        width: -moz-min-content;    /* Firefox/Gecko */
        width: -webkit-min-content; /* Firefox/Gecko */    
        width: min-content;
    }
}

Some copy/paste mistake I guess.

If the window is wide enough to create a gap between the pictures the text will get wider than the images.

Answer 1

Use this:

.scrolling-wrapper-flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  }

  .card, .item {
    flex: 0 0 auto;
      background: lightgreen;
  width: -moz-min-content;  /* Firefox/Gecko */
  width: -webkit-min-content;   /* Firefox/Gecko */    
  width: min-content;
  }