弹性项目内的图像缩小[重复]

Question

我有一个 flex div 元素，其中包含三个 div 元素，每个子 div 中有一个图像，图像下方有一个文本（模态）。三个子 div 的大小应该始终相同。 但我的问题是，当一个子 div 中的文本少于其他子 div 中的文本时，图像会缩小，而其他两个子 div 会占用它的空间。

我似乎无法找出问题所在。

请帮忙。

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;
    }

Answer 1

为 .activity-children 赋予 flex: 1。

.activity-children {
    flex: 1;
}

Answer 2

从here 开始，将flex: 1 添加到 flex 容器内的每个单独项目将使它们在主轴上的大小相等：

.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>

Answer 3

.activity-children {
    flex: 1;
}

或

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