Dynamically change height based on background image flexbox [duplicate] - css

Question

This question already has answers here:
Fit div size to background image
(3 answers)
Closed 2 years ago.
Fiddle:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
When the browser is resized, the images are being correctly resized, and the width is changing correctly, but the height is not changing at all. If I remove height: 375px; the box collapses. How do I make the height responsive like the width currently is?
<div class="container">
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">c</div>
<div class="bc">g</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
</div>
CSS
.container {
width: 80%;
margin: 1rem auto;
background: #f0f0f0;
min-height: 375px;
padding: 0.1rem;
border-radius: 0.1rem;
display: flex;
justify-content: space-between;
flex-wrap: row;
height: 100%;
}
.card {
flex: 1 1 auto;
flex-flow: row nowrap;
background: url("https://i.imgur.com/q8WyDB6.png") no-repeat;
background-size: 100%;
margin: 0.2rem;
display: flex;
flex-direction: column;
flex-shrink: 1;
max-width: 148px;
max-height: 375px;
min-height: 100%;
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, 1);
font-family: "Segoe UI";
}
.card::after {
content: "";
}
.t {
flex: 0 0 auto;
display: flex;
}
.tl {
min-height: 30px;
background: rgba(255, 0, 0, .1);
flex: 0 0 30%;
}
.tr {
flex: 1 1 100%;
background: rgba(0, 0, 255, .1);
font-weight: 600;
font-size: 1.0rem;
text-align: center;
align-self: center;
}
.mc {
height: 100%;
flex: 1 1 100%;
background: rgba(0, 255, 0, .1);
padding: 0.5rem 0.5rem;
}
.bc {
flex: 0 0 auto;
background: rgba(255, 255, 0, .1);
padding: 1.0rem 0.5rem;
}

Answer 1

Add align-items: flex-start to to the container. By default it's strech.
stretch (default): stretch to fill the container (still respect min-width/max-width)
flex-start / start / self-start: items are placed at the start of the cross axis.