如何在弹性商品中获取商品以拉伸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;
}

指向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>