How to wrap content of a div when a parragraph is in two lines in CSS?

Question

I have a container that is centered and have three divs inside of it, each of them with one image and one parragraph. What I would like to do is to occupy full available space of the container with space between the elements (whose width should be equal to their content). I am using flexbox with justify-content: space-between and its working well on desktop screens, the children occupy full available space with dynamic space between them: OK ✓

The problem starts when lower screens comes into the scene and the parragraph have long words that goes into the next line. That is correct, because the parragraph have to divide into more lines if it does not fit the available space. The problem is that the parragraph is leaving an extra space that make each of the children be wider that it should be.

Here some screenshots:

OK ✓ in desktop screens - no extra space on parragraphs and their parent divs wrap correctly its content:

Wrong ❌ on lower screens. Parragraph goes into two lines (thing that is correct) but it leaves an extra space that makes its wrapper wider.

Here is an example using flexbox.

.wrapper{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}

img{
  max-width: 100px;
}

.item{
  background-color: red;
}

<div class="wrapper">
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooong text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooong text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooooooong text
    </p>
  </div> 
</div>

It is important to note that I am trying to avoid fixed widths, gaps or anything that does not make it dynamic. I do not know how much space I will have available and it can be more than three elements on the container (here is just an example).

A near approach of what I need could be set width of each of the children of the container to width: min-content. Of course, this is not what I need because it forces parragraph to divide into more lines as the container is smaller, but it seems to wrap parragraph correctly (without extra spaces).

.wrapper{
  display: flex;
  gap: 10px;
  justify-content: space-between;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}

img{
  max-width: 100px;
}

.item{
  background-color: red;
  width: min-content;
}

<div class="wrapper">
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div> 
</div>

Here an screenshot (even in desktop screens is wrapping parragraph correctly):

I have tried with these properties also but none of them seems to work:

• word-wrap
• word-break
• width: fit-content

I also have tried using CSS grid but without success:

.wrapper{
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, auto));
  gap: 10px;
  justify-content: space-between;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  background-color: #ddd;
}

img{
  max-width: 100px;
}

.item{
  background-color: red;
}

<div class="wrapper">
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div>
  <div class="item">
    <img src="https://cdn-icons-png.flaticon.com/512/919/919826.png">
    <p>
      This is a prove with looooonooooooooongg text
    </p>
  </div> 
</div>

I know that in the example above each column is getting full space because each column have max-width as auto, but I could not find any way to wrap content without that extra space on parragraphs.

How can I wrap X number of columns that fits their content with dynamic available space between them on a single container? I am looking for a solution either using flexbox or CSS grid as they will be a fixed amount of columns (here there are three just to simplify).

Thanks in advance!