Flex: верхняя часть изображения, нижняя часть текста. Увеличьте оставшуюся высоту с помощью соотношения сторон изображения.

Question

Я пытаюсь создать простой дизайн, изображение сверху, текст снизу. Я использую flexbox.

Я хочу сохранить изображения с одинаковым соотношением, поэтому для этого я использую хак с соотношением сторон верхнего отступа, который работает хорошо.

Я борюсь с тем, чтобы текстовое поле под изображением занимало оставшееся пространство в контейнере. Я надеялся, что flexbox сделает это проще, но я думаю, что использование его в сочетании с хаком с соотношением сторон вызывает проблемы.

Вот скрипка базовой раскладки https://codepen.io/anon/pen/NEqdyN. Может кто-нибудь помочь мне расширить каждое из красных полей, чтобы заполнить оставшуюся высоту? Мне также нужно добавить радиус границы внизу каждого угла, чтобы я не мог использовать скрытый метод переполнения.

Заранее спасибо!

код ниже

<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  width: 30%;
  margin: 0 1%
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px
}

Answer 1

Должно работать, определяя flex container на каждой карточке и используя flex: 1 0 auto на текстовых блоках .

.card {
  display: flex;
  flex-direction: column;
}

.text {
  flex: 1 0 auto;
}

---

Демо

body {
  margin: 0;
}

.container {
  display: flex;
}

.card {
  display: flex;
  flex-direction: column;
  width: 30%;
  margin: 0 1%;
}

.image-wrapper {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.text {
  background: red;
  padding: 20px;
  flex: 1 0 auto;
}

<div class="container">
  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>

  <div class="card">
    <div class="image-wrapper">
      <img src="https://via.placeholder.com/350x150?Text=Image">
    </div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br><br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>