Flexbox content-responsive grid-type row

Issue

I have the following html:

<div class="row">
    <div class="item">
        <img src="image1" />
    </div>
    <div class="item">
        <video>
            <source src="video1" />
        </video>
    </div>
</div>

I'd like it for row to automatically adjust its height and for the subchildren of row to automatically adjust their widths and heights such that the aspect ratios of the content under the img and video tags remains the same, that row will have a width of 100%, and that there is no empty space within row.

In other words, I'm trying to make a content-responsive grid row with flexbox. Like so:

Except that rows and columns automatically change size to preserve image aspect ratios without creating gaps.

My current CSS attempt is as follows:

.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.item {
    position: relative;
    min-height: 100%;
}

.item video {
    max-width: 100%;
    max-height: 100%;
}

.item img {
    max-width: 100%;
    max-height: 100%;
}

Solution

There seems to be no effective way to do this with flexbox. The only example I could find of this working properly was on a wix website, which works by doing the following:

1. All items are positioned absolutely and have width and height set manually.
2. Initial width and height of all items are zero to prevent initial rendering problems.
3. A function is defined which manually calculates the correct position, width, and height of all items.
4. This function is called on every resize and immediately after page load.

Answered By - aw17