GitHub 6740★

Have you seen CSS Scan?

The fastest and easiest way to check, copy and edit CSS.

Learn more →

CSS Scan logo

Card

HTML

<div class="card">
<!-- Cover -->
<div class="card__cover">
...
</div>

<!-- Content -->
<div class="card__content">
...
</div>
...
</div>

CSS

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

.card__cover {
height: 20rem;
width: 100%;
}

.card__content {
/* Take available height */
flex: 1;
}
Demo
Follow me on and to get more useful contents.