如何响应式处理包装图像和文本的 div？

Question

我有一个 div 在左侧包装图像，在右侧有一个包含文本的 div，两者之间有一些边距。当窗口大小变窄时，我希望文本在其最大宽度和最小宽度之间缩小，图像同时缩小以使它们彼此相邻，并且只有在文本缩小后才能使其跳到图像下方.

但是发生的情况是 - 一旦文本碰到图像，它就会跳到下方，而不是缩小到最小宽度并试图留在图像旁边。

我的代码是这样的：

<div class="container">
  <img class="headshot" src="..." />
  <div class="bio-text">
    <h3>BIO</h3>
    <p>Lorem ipsum...</p>
  </div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  margin: auto;
}

.headshot {
  max-width: 100%;
  height: auto;
  margin: 40px;
}

.bio-text {
  max-width: 450px;
  min-width: 250px;
}

任何见解将不胜感激！

Answer 1

您遇到的一个问题是您正在混合具有最小和最大宽度的 flexbox，这与 .container 的布局冲突。一种选择是将.bio-text 分配为250px 的flex，并让它增长以占用其余空间。如果容器不能同时容纳两者，它将在图像下方换行。

我有一个带有这个想法的代码笔：https://codepen.io/sirech/pen/BYJJdz

这符合您的需要吗？