Having troubles wrapping text to align with image using only flex-CodePudding

I am trying to wrap text under an image using flexbox only, i have tried almost everything i can come up with, using flex-grow, flex-basis, flex-shrink. I've put all of the text and image into their own seperate div classes but still that didn't seem to help. The image is aligned with the text but the text won't wrap, the only way i got the image to align with the text is by using "text-align" im not sure why or how text align moved an IMAGE but it did.

**HTML:**```<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Information</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div >Information!</div>

    <div >
      <div >

        <img src="./images/barberry.png" alt="barberry">
        <div >This is a type of plant. We love this one.</div>
        
      </div>

      <div >

        <img src="./images/chilli.png" alt="chili">
    <div >This is another type of plant. Isn't it nice</div>



      </div>

      <div >

        <img src="./images/pepper.png" alt="pepper">
    <div >We have so many plants. Yay plants.</div>

      </div>

      <div >

        <img src="./images/saffron.png" alt="saffron">
    <div >I'm running out of things to say about plants.</div>


      </div>
   

    
    

    
    </div>```
    CSS:
    ```
        body {
          font-family: 'Courier New', Courier, monospace;
        }
        
        .flex-container {
          display: flex;
          flex: 1;
         justify-content: center;
         text-align: center;
         gap: 52px;
        }
        
        
        
        
        
        
        img {
          width: 100px;
          height: 100px;
        }
        
        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 32px;
          font-size: 36px;
          font-weight: 900;
        }```

CodePudding user response：

The text does not overlap image width, you have to set the width for the parent div separately from the image so that the text will have the same width

body {
  font-family: 'Courier New', Courier, monospace;
}

.flex-container {
  display: flex;
  flex: 1;
  justify-content: space-around;
  flex-wrap: wrap;
}

.flex-wrap {
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex-wrap img {
  height: 100px;
}

.flex-wrap .text {
  text-align: center;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 32px;
  font-size: 36px;
  font-weight: 900;
}

<div >Information!</div>

<div >
  <div >

    <img src="https://picsum.photos/100" alt="barberry">
    <div >This is a type of plant. We love this one.</div>

  </div>

  <div >

    <img src="https://picsum.photos/100" alt="chili">
    <div >This is another type of plant. Isn't it nice</div>

  </div>

  <div >

    <img src="https://picsum.photos/100" alt="pepper">
    <div >We have so many plants. Yay plants.</div>

  </div>

  <div >

    <img src="https://picsum.photos/100" alt="saffron">
    <div >I'm running out of things to say about plants.</div>

  </div>

</div>