Dynamically change height of flexbox container object based on contents - css

Question

Fiddle:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
When the browser is resized, the images are being correctly resized, and the width of the container is changing correctly, but the height of the container is not changing. If I remove height: 375px; the box collapses. How do I make the height responsive like the width currently is?
Basically I need to dynamically set the height: to the automatic width * aspect ratio. The images are always the same size so it's not an issue to use a fixed aspect ratio. I would rather use CSS over javascript to do this if possible.
Alternatively if there is another way to do it based on the background-image that would work too.
This is not a duplicate of Fit div size to background image. Do not close this as a duplicate of that question. That question assumes a static background image size.
<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

OK, I accomplished it using Javascript:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
A css-only approach would be good, but not sure this is possible.
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
var containerWidth = $('.t').width() * (375/148);
$('#container').css({
height: containerWidth
});
}