Как я могу получить элемент внутри гибкого элемента, чтобы растянуть на 100% родительский элемент?

Question

У меня есть группа карт, которые все находятся в гибком контейнере, так что они растягиваются на одинаковую высоту.Как я могу сделать так, чтобы карта ___ содержала растягивала оставшуюся высоту так, чтобы дата находилась внизу карты?Я пытался добавить высоту: 100%;который ничего не делает.Почему это?Что я не понимаю?

HTML и CSS ниже

<div class="wrapper">
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is a news</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is another news</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
           <img class="card__image" src="card-image.jpg" />
          <div class="card__content">
            <h2 class="h5">This is another news with a very long title</h2>
            <small class="card__date">30 May 2019</small> 
          </div>
        </a>
    </article>
    <article class="card">
        <a class="card-link" href="www.test.com">
            <img class="card__image" src="card-image.jpg" />
            <div class="card__content">
                <h2 class="h5">This is a another news with a really long heading</h2>
                <small class="card__date">30 May 2019</small> 
            </div>
        </a>
    </article>
</div>

CSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
}

.card {
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    min-height: 100%;
}

.card-link {
    display: inline-block;
    min-width: 100%;
    min-height: 100%;
    margin-right: 1rem;
}

.card__content {
    position: relative;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: white;
    height: 100%;
}

.card__image {
    background: purple;
    min-width: 100%;
    position: relative;
}


.card__date {
    margin-top: auto;
}

Ссылка на кодовую ручку здесь

https://codepen.io/anon/pen/KjBGrd#anon-login

Answer 1

Просто продолжайте использовать flexbox на предметах обертки и расширяйте их дочерние элементы по мере необходимости.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.wrapper {
  display: flex;
}

.card {
  width: 30%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid red;
  
  display: flex;
  flex-direction: column;
}

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

.card__content {
  padding: 2rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.card__image {
  display: block;
  background: purple;
  height: 100px;
}

.card__date {
  margin-top: auto;
}

<div class="wrapper">
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a news</h2>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni at repellat fugit veniam! Optio maxime tempora quis inventore pariatur architecto provident, ex quam ullam repellendus.</p>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is another news</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a another news with a really long heading</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
</div>

Answer 2

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

.wrapper {
  display: flex;
}

.card {
  width: 30%;
  box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  min-height: 100%;
  position: relative;
}

.card-link {
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
}

.card__content {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.card__image {
  display: inline-block;
  background: purple;
  min-width: 100%;
  position: relative;
  height: 100px;
}

.card__date {
  margin-top: auto;
  position: absolute;
  bottom: 20px;
}

<div class="wrapper">
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a news</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is another news</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
  <article class="card">
    <a class="card-link" href="www.test.com">
      <img class="card__image" src="card-image.jpg" />
      <div class="card__content">
        <h2 class="h5">This is a another news with a really long heading</h2>
        <small class="card__date">30 May 2019</small>
      </div>
    </a>
  </article>
</div>