我有以下HTML：

<代码><；DIV类="；行"；>；<；DIV类="；项目"；>；<；IMG SRC="；图像1"；/>；<；/DIV>；<；DIV类="；项目"；>；<；视频（>；）<；源SRC="；视频1"；/>；<；/视频>；<；/DIV>；<；/DIV>；

我想让行自动调整其高度，让行的子代自动调整其宽度和高度，以便<div class="row"> <div class="item"> <img src="image1" /> </div> <div class="item"> <video> <source src="video1" /> </video> </div> </div> 和img标记下的内容的纵横比保持不变，该行的宽度将为100%，并且行中没有空白。

换句话说，我正在尝试使用Flexbox创建一个内容响应的网格行。像这样：

除了行和列会自动更改大小以保持图像纵横比，而不会产生间隙。

我目前的CSS尝试如下：

<代码>.行{宽度：100%；显示：Flex；flex-direction：行；柔性包裹：NOWRAP；}.项{位置：相对；最小高度：100%；}.item视频{最大宽度：100%；最大高度：100%；}.item IMG{最大宽度：100%；最大高度：100%；}

顺晟科技：

似乎没有有效的方法来实现这一点。我能找到的唯一一个正常工作的例子是在Wix网站上，它通过执行以下操作来工作：

1. 所有项目都绝对定位，并手动设置宽度和高度。
所有项目的
2. 初始宽度和高度均为零，以防止出现初始渲染问题。
定义了手动计算所有项目的正确位置、宽度和高度的
3. 函数。
4. 此函数在每次调整大小时以及页面加载后立即调用。