html - 如何用图像填充其余的div高度？

Question

我在一个容器 div 中有三个 div。其中第二个只有文本，它的高度是动态的，具体取决于文本高度。第一和第三个有图像，我想填写其余的高度，使这 3 个 div 具有相同的高度。如何设置图片的高度来填满剩下的剩余高度？？

当我将图像的高度设置为 100% 时，父 div 已获得例如600px ，图像也变大了 600px 并且内容溢出。

.offer-container {
    display: flex;
    justify-content: space-between;
    > div {
      width: 30%;
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

编辑

<div className='offer-container'>
      <div>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum hic a nulla debitis adipisci cupiditate
              velit deleniti sint obcaecati? Ex quia illum id facere nulla dolores, cupiditate veniam explicabo
              excepturi?
            </p>
            <div>
              <img src='/images/bgc.png' alt='' />
            </div>
          </div>
    <div>text...</div>
    <div><img src='/images/bgc.png' alt='' /></div>
</div>

Answer 1

嘿，这会解决你的问题:

.parent{
  display: flex;
}

.child {
  width: 350px;
}

.class-1 {
   display: flex;
  flex-direction: column;
}

#image{
   width: 90%;
  height:100%;
  overflow: hidden;
  flex-grow : 1;
  position: relative;
  
}

#image img {
  width: 100%;
  height: auto;
  position:absolute;
}

<div class="parent">
  <div class=" child class-1">
    <div class="text">
      <p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj lkasjfklasdj f</p>
    </div>
    <div id="image">
      <!--   <div class="for-image" style = "background-image:url('https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg')"> -->
      <img src="https://rsvpify.com/wp-content/uploads/2017/02/wedding-day-couple-chicago.jpg" alt="">
    </div>
  </div>
  <div class=" child 2">
    <p>asdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj lkasjfklasdj fasdsadasdsadasdasdasdasdaj sjflskdjfkasj flksadj flksadj flksadj flkasdj flkasdjfklasdj flkasdjflkas jflksadj ldj flksadj flksadj flkasdj flkasdjfklasdj flkasdsadsads a das d aasdsadsaddasd as asd asd s ds das das das d ads asd asasdjflkas jflgsdvxzvxzcvzxcvzxv</p>
  </div>
</div>

如果你想摆弄这里是codepen link