如何让图片与文本Div始终保持响应式且尺寸一致？

我想让一张图片和一个文本Div并排显示，预期效果如下：

但实际显示成了这样：

我试过用flex-shrink和flex-grow属性，但没效果。是我Flexbox用法错了，还是应该换其他方案？

我的代码： #

CSS：

.explore-adoption {
  display: flex;
  flex-direction: row;
  max-height: 487px;
  height: 100%;
  align-items: center;
  margin-top: 100px;
  width: 100%;
  text-align: center;
}

.explore-info {
  max-width: 600px;
  width: 100%;
  max-height: 487px;
  height: 100%;
  padding: 4em;
  background-color: #363635;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  flex-grow: 0;
  gap: 1em;
}

.explore-image img {
  width: 100%;
  align-self: center;
}

HTML：

<section class="explore-adoption">
  <div class="explore-info">
    <h2 class="section-title light">Explore adoption safely and securely</h2>
    <p class="text-content light">Our platforms empower women considering adoprion by providing choice and privacy.</p>
    <a href="#" class="section-link light">
      <span>Learn more</span>
      <i class="fa-solid fa-circle-arrow-right"></i>
    </a>
  </div>
  <div class="explore-image">
    <img src="https://via.placeholder.com/200" alt="Birthmother at computer">
  </div>
</section>

核心问题是.explore-info设置了width:100%，这会让它独占flex容器的全部宽度，直接把图片挤到无法正常显示的状态。调整以下几点就能解决：

修改后的CSS代码： #

.explore-adoption {
  display: flex;
  flex-direction: row;
  max-height: 487px;
  height: 100%;
  align-items: stretch; /* 改为stretch，让两个子元素高度一致 */
  margin-top: 100px;
  width: 100%;
  text-align: center;
}

.explore-info {
  max-width: 600px;
  /* 移除width:100%，保留max-width限制最大宽度 */
  max-height: 487px;
  height: 100%;
  padding: 4em;
  background-color: #363635;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  flex-grow: 0;
  gap: 1em;
}

.explore-image {
  flex: 1; /* 让图片容器填充文本容器之外的剩余空间 */
  min-width: 300px; /* 保证小屏幕下图片不会被压缩得太窄 */
}

.explore-image img {
  width: 100%;
  height: 100%; /* 匹配容器高度，避免留白 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分，防止变形 */
}

关键调整说明： #

1. 移除.explore-info的width:100%：只保留max-width:600px，这样文本容器最多占600px，剩下的空间留给图片。
2. 调整align-items为stretch：让文本容器和图片容器高度一致，匹配预期效果的视觉对齐。
3. 给.explore-image加flex:1和min-width：flex:1让图片自动填充剩余空间，min-width避免在窄屏中图片被压缩到无法看清。
4. 图片设置height:100%和object-fit:cover：保证图片填满容器，同时保持比例不变形。

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