如何让弹性项目中的项目拉伸父项的 100%？

Question

我有一组卡片，它们都在一个弹性容器中，因此它们伸展的高度相同。 如何使 card__content 拉伸剩余的高度，以便日期位于卡片的底部？ 我试过添加 高度：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;
}

这里有一个codepen的链接

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>