如何用CSS Flex实现右侧图片高度匹配左侧动态内容并约束父容器高度？

使用场景 #

• 父div包含两个子div
• 左侧div加载动态文本内容
• 右侧div加载尺寸动态的图片
• 父div的最大高度等于左侧div的高度，右侧div内的图片需适配该高度并完整显示（contain效果）

示意图 #

当前代码 #

<div id="parent" style="padding: 10px; display:flex">
      <div id="left-panel" style="flex:1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum facilis
        aspernatur eveniet vero nostrum qui error voluptatem iste quas minima
        eum sapiente delectus eos distinctio enim, aliquam cupiditate ex
        tempore! Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Laborum facilis aspernatur eveniet vero nostrum qui error voluptatem
        iste quas minima eum sapiente delectus eos distinctio enim, aliquam
        cupiditate ex tempore! Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Laborum facilis aspernatur eveniet vero nostrum qui
        error voluptatem iste quas minima eum sapiente delectus eos distinctio
        enim, aliquam cupiditate ex tempore!
      </div>
      <div id="right-panel" style="flex: 1">
        <img
          src="https://images.pexels.com/photos/346885/pexels-photo-346885.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
          alt=""
        />
      </div>
    </div>

请问如何使用CSS Flex实现该需求？

要满足需求，核心是让父容器高度由左侧文本面板决定，同时限制右侧图片面板的高度与父容器一致，并让图片以contain方式适配高度。具体修改如下：

1. 父容器设置：添加align-items: flex-start，避免子元素被默认拉伸；父容器无需额外设置高度，会自动由左侧内容撑开。
2. 右侧面板设置：
   • 添加height: 100%，让右侧面板高度与父容器（即左侧面板高度）保持一致
   • 设置display: flex，方便内部图片居中对齐
3. 图片设置：
   • 添加object-fit: contain，确保图片按比例缩放、完整显示且不变形
   • 设置width: 100%和height: 100%，让图片占满面板空间

修改后的完整代码 #

<div id="parent" style="padding: 10px; display:flex; align-items: flex-start;">
  <div id="left-panel" style="flex:1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum facilis
    aspernatur eveniet vero nostrum qui error voluptatem iste quas minima
    eum sapiente delectus eos distinctio enim, aliquam cupiditate ex
    tempore! Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Laborum facilis aspernatur eveniet vero nostrum qui error voluptatem
    iste quas minima eum sapiente delectus eos distinctio enim, aliquam
    cupiditate ex tempore! Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Laborum facilis aspernatur eveniet vero nostrum qui
    error voluptatem iste quas minima eum sapiente delectus eos distinctio
    enim, aliquam cupiditate ex tempore!
  </div>
  <div id="right-panel" style="flex: 1; height: 100%; display: flex;">
    <img
      src="https://images.pexels.com/photos/346885/pexels-photo-346885.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
      alt=""
      style="object-fit: contain; width: 100%; height: 100%;"
    />
  </div>
</div>

关键说明 #

• align-items: flex-start：阻止Flex子元素的默认拉伸行为，避免右侧面板高度被强制拉平
• height: 100%：让右侧面板继承父容器的高度，而父容器高度完全由左侧文本内容决定
• object-fit: contain：保证图片在适配面板高度的同时，完整显示所有内容，不会出现裁剪或变形

内容的提问来源于stack exchange，提问作者margherita pizza