Image inisde flex item shrinks

Question

I have a flex div element with three div elements and an image in each child div with a text beneath the image (Modal). The three child divs should be the same size all the time. But my problem is when the text in one child div is less than the texts in the other child divs, the image shrinks and the other two child divs takes its space.

I can't seem to find out what the problem is.

Please help.

HTML

<div class="activity-children">
        <img src="pictures/home-office.jpg" alt="Home Office Pix" class="activity-pix"/>
    <div class="title-activity-pix">
        <h3>The title of an amature</h3>
        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
    </div>
</div>

<div class="activity-children">
    <img src="pictures/cat.jpg" alt="Cat Pix" class="activity-pix"/>
<div class="title-activity-pix">
        <h3>The title of an amature</h3>
        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
    </div>
</div>
<div class="activity-children">
    <img src="pictures/sheep.jpg" alt="Sheep Pix" class="activity-pix"/>
    <div class="title-activity-pix">
        <h3>The title of an amature</h3>
        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
    </div>
</div>

CSS

    .flex-activities {
        display: flex;
        margin: 5px auto;
        width: 97%;
    }

    .activity-pix {
        display: block;
        width: 100%;
        margin: auto;
    }

score 2 · Accepted Answer · answered Dec 14 '19 at 07:30

2

Give flex: 1 for .activity-children.

.activity-children {
    flex: 1;
}

answered Dec 14 '19 at 07:30

Akhi Akl

3,795
1
15
26

score 1 · Answer 2 · answered Dec 14 '19 at 08:00

From here, add flex: 1 to each individual item inside a flex container will make them equal size in the main axis:

.flex-activities {
    display: flex;
    margin: 5px auto;
    width: 97%;
}

.activity-children {
    flex: 1;
}

.activity-pix {
    display: block;
    width: 100%;
    margin: auto;
}

<div class="flex-activities">

  <div class="activity-children">
          <img src="https://source.unsplash.com/random/200x150" alt="Home Office Pix" class="activity-pix"/>
      <div class="title-activity-pix">
          <h3>The title of an amature</h3>
          <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
  </div>

  <div class="activity-children">
      <img src="https://source.unsplash.com/random/200x150" alt="Cat Pix" class="activity-pix"/>
  <div class="title-activity-pix">
          <h3>The title of an amature</h3>
          <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
      </div>
  </div>
  
  <div class="activity-children">
      <img src="https://source.unsplash.com/random/200x150" alt="Sheep Pix" class="activity-pix"/>
      <div class="title-activity-pix">
          <h3>The title of an amature</h3>
          <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          </p>
      </div>
  </div>

</div>

Thank you guys. Adding {flex:1} to the activity-children element did solve my problem. — Misbahu Abubakar, Dec 14 '19 at 14:27

score 1 · Answer 3 · answered Dec 14 '19 at 08:42

1

.activity-children {
    flex: 1;
}

OR

.activity-children {
   flex-basis: 0; 
   flex-grow: 1;
}

answered Dec 14 '19 at 08:42

mohamed ali

202
2
3

Image inisde flex item shrinks

3 Answers3