css - 如何制作多个高度相同的div

Question

<div id="left">
  <div class="card gallery-map">
    <img class="card-img-top flex-gallery" src="">
    <div class="card-body">
      <p class="card-text">A</p>
    </div>
  </div>
  <div class="card gallery-map">
    <img class="card-img-top flex-gallery" src="">
    <div class="card-body">
      <p class="card-text">B</p>
    </div>
  </div>
  <div class="card gallery-map">
    <img class="card-img-top flex-gallery" src="">
    <div class="card-body">
      <p class="card-text">C</p>
    </div>
  </div>
  <div class="card gallery-map">
    <img class="card-img-top flex-gallery" src="">
    <div class="card-body">
      <p class="card-text">D</p>
    </div>
  </div>
</div>

这是一组随机的图库效果，但由于部分图片大小不同，导致刷新时高度不同。我希望能够统一它们的高度，如果小图像不够高，请适当拉伸它们。 画廊样本

#left {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        flex: 1;
        height: 70vh;

        .gallery-map {
            border-style: double;
            border-width: 0.3em;
            border-color: $third-color;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            flex: 50%;
            box-sizing: border-box;
            margin: 0 .5vw 1vh;
            flex-basis: calc(45%);
            //height: 100%;
            @media screen and (max-width: 600px) {
                flex-basis: 100%;
            }

            img {
                width: 100%;
                height: 33.5vh;
            }
        }    
    }

标签： cssflexbox