如何在弹性商品中获取商品以拉伸100％的父商品？

Question

I have a group of cards that are all in a flex container so that they stretch out the same height. How can I make the card__content stretch the remaining height so that the date will be at the bottom of the card? I've tried adding height: 100%; which isn't doing anything. Why's this? What am I not understanding?

Html and css below

<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;
}

A link to a codepen here

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

Answer 1

Just keep using flexbox on the wrapping items and extending their children as required.

 * { 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

I have change the date position to absolute to put it always at the bottom of the card no matter what is the text size.

 .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>