解决可调整大小的Flexbox图片被容器或视口截断问题

我正在实现成对图片水平并排的布局，需要满足以下三个核心条件：

• 无论两张图片的宽高比差异如何，它们占用的面积大致相同
• 每张图片在垂直方向适配视口
• 并排的两张图片整体在水平方向适配视口

当前布局已经接近需求，但在部分视口尺寸下，图片会超出页面左右边界，无法根据视口水平尺寸自动缩小。

<!doctype html>
<meta charset=utf-8>
<style>
@import url('reset.css'); /* https://meyerweb.com/eric/tools/css/reset/ */
:root {
    background-color: oklch(95.25% 0.0187 235.01);
}
.diptych-area {
    display: flex;
    width: min(90vh, 100vw);
    height: 90vh;
    margin: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    container-type: size;

    figure {
        &.left {
            display: flex;
            justify-content: end;
            flex-basis: calc((var(--left-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
        &.right {
            display: flex;
            justify-content: start;
            flex-basis: calc((var(--right-aspect-ratio) / (var(--left-aspect-ratio) + var(--right-aspect-ratio))) * 100vw); }
        box-sizing: border-box;
        img {
            max-height: 100cqh; } } }

figure {
    flex-basis: content;
    position: relative;
    margin: 0 1rem;
    scroll-snap-align: center;

    & img {
        display: block;
        box-sizing: border-box;
        max-height: 80vh;
        max-width: min(100vh, 100cqw);
        border: 24px solid white; }
</style>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 1.5;">
  <figure class=left>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_Le%C3%B3n%2C_Espa%C3%B1a.jpg/1365px-Escaleras_a_la_Catedral_--_2023_--_Burgos%2C_Castilla_y_Le%C3%B3n%2C_Espa%C3%B1a.jpg">
  </figure>
  <figure class=right>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Himalayas%2C_Cholatse%2C_Nepal.jpg/1280px-Himalayas%2C_Cholatse%2C_Nepal.jpg">
  </figure>
</div>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 0.6667; --right-aspect-ratio: 0.6667;">
  <figure class=left>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82_%D1%86%D0%B5%D1%80%D0%BA%D0%B2%D0%B8._%D0%94%D0%BE%D1%88%D0%BA%D0%B8_%D0%BE%D0%B1%D0%B1%D0%B8%D0%B2%D0%BA%D0%B8.jpg/682px-%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82_%D1%86%D0%B5%D1%80%D0%BA%D0%B2%D0%B8._%D0%94%D0%BE%D1%88%D0%BA%D0%B8_%D0%BE%D0%B1%D0%B1%D0%B8%D0%B2%D0%BA%D0%B8.jpg">
  </figure>
  <figure class=right>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Crack_climbing_in_Indian_Creek%2C_Utah.jpg/681px-Crack_climbing_in_Indian_Creek%2C_Utah.jpg">
  </figure>
</div>

<p>test 1 2 3

<div class=diptych-area style="--left-aspect-ratio: 1.2; --right-aspect-ratio: 0.8;">
  <figure class=left>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Flussregenpfeifer_im_flachen_Wasser_01.jpg/1219px-Flussregenpfeifer_im_flachen_Wasser_01.jpg"></div>
  </figure>
  <figure class=right>
    <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Galer%C3%ADa_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg/818px-Galer%C3%ADa_Sciarra%2C_Roma%2C_Italia%2C_2022-09-16%2C_DD_117-119.jpg"></div>
  </figure>
</div>

正常显示效果 #

错误显示效果（视口调整后） #

目前无法找到让图片根据视口水平尺寸适当缩小的方法。

内容的提问来源于stack exchange，提问作者Daphne Preston-Kendal