首先，这是我目前拥有的代码的JsFiddle。
我要尝试做的是使parent-wrapper（红色）和left-wrapper（绿色）的高度都取决于right-wrapper（黄色）的高度，内容溢出容器/使用垂直滚动条。当前，当在较小的视口中查看该图像时，左包装器的宽度小于其高度，一切都会按预期和预期运行。父包装和左包装器都会根据右包装器的高度调整大小。
但是，一旦视口调整大小超过此点，由于图像和附加的object-fit样式，父和右包装器将根据左包装器的高度开始调整尺寸。这就是我不想发生的事情/试图阻止的事情。
一旦我删除了object-fit样式，调整视口的大小就会拉伸图像，这看起来很糟糕。如果我从图像中删除了w-100类，那么即使我仍然为图像指定了计算出的高度，它也根本不会调整大小。
我也尝试使用One flex item sets the height limit for siblings中给出的解决方案，但是在那儿，我在right-wrapper上看到了一个我不想要的滚动条，或者该解决方案根本不起作用。
就像上面提到的，我想要实现的是使父包装和左包装的高度都相对于右包装的高度（jsfiddle上的黄色容器），并且没有任何内容溢出，或者使用滚动条作为其中的内容这些包装纸。在我的实际网页上，我会有很多这样的示例（例如：JsFiddle #2），每个示例在右包装中都包含不同数量的内容条目，因此拥有固定高度的东西并不会快速解决问题的方法，因为我正在尝试尽可能减少空白。
我希望我所要实现的目标足够明确，并且我非常感谢您的协助。