Single column flex container with scaled-down images

Question

I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.

It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.

The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.

What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!

EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.

Before Browser height reduction ---> After

body {
    font-family: arial;
    font-size: 26px;
    text-align: center;
    color: black;
    background-color: white;
}

.smallhint {
  font-size: 16px;
  color: #8c8c8c;
}

img {
    padding: 0;
    margin: 0;
    font-size: 0;
}

.flex-column {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    height: 90vh;
    flex-grow: 0;
    min-width: 0;
    min-height: 0;
}

.flex-row {
    display: flex;
    flex-direction: row;
    flex: 0 1.5 auto;
    justify-content: center;
    align-items: center;
    padding: 0px;
    margin: 0px;
    font-size: 0;
    min-width: 0;
    min-height: 0;
    background-color: yellow;
}

.context {
    display: flex;
    min-height: 0;
    background-color: blue;
}

.content img {
    height: 100%;
}

.primary {
    position: relative;
    z-index: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    font-size: 0;
    min-height: 0;
}

.primary img {
    border-style: solid;
    border-width: 3px;
    border-color: black;
    height: calc(100% - 2*3px);
}

.mobile .nightMode .primary img {
    border-style: solid;
    border-width: 3px;
    border-color: black;
}

.mask {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.nonimage {
    padding-top: 5px;
    display: inline;
}

<div class="container">
<div class="flex-column">

    <div class="primary"><img src="https://via.placeholder.com/200">
        <div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
    </div>

    <div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
    </div>

    <div class="nonimage">
        <div class="smallhint">Some Text<br>Other Text</div></div>
    </div>

</div>
</div>

Answer 1

These rules address the question, although there are still some issues with this approach that could be of importance.

body {
    font-family: arial;
    font-size: 26px;
    text-align: center;
    color: black;
    background-color: white;
}

.smallhint {
    font-size: 16px;
    color: #8c8c8c;
}

img {
    padding: 0;
    margin: 0;
    font-size: 0;
    display: block;
    object-fit: scale-down;
    min-height: 0;
}

.flex-column {
    display: flex;
    flex-direction: column;
    padding: 0px;
    margin: 0px;
    height: 90vh;
    flex-grow: 0;
    min-width: 0;
    min-height: 0;
}

.flex-row {
    display: flex;
    flex: 0 1.5 auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 0;
    background-color: green;
}

.context {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    background-color: blue;
}

.primary {
    position: relative;
    z-index: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    font-size: 0;
    min-height: 0;
    align-items: end;
    background-color: orange;
}

.primary img {
    margin-left: auto;
    margin-right: auto;
    border-style: solid;
    border-width: 3px;
    border-color: black;
    height: calc(100% - 2*3px);
}

.mask {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
}

.nonimage {
    padding-top: 5px;
    display: inline;
}

Answer 2

I think this could be a possible solution, #img1 being the first of the secondary images:

img {
    max-width: 100%;
}

#img1 {
    height: 20vw;
    max-height: 150px;
    min-height: 75px;
} 

.primary img {
    height: 50vw;
    max-height: 200px;
}