使用calc函数设置字体大小时Flexbox元素重叠问题求助

我编写了简单的HTML和CSS代码，采用CSS calc函数实现流式排版。但缩小浏览器窗口时，图片会与<h1>文本发生重叠；而将字体大小改为3rem这类固定值时，该问题就会消失。请问如何在继续使用calc函数的前提下，阻止元素重叠？

HTML代码 #

<div>
  <h1>
    This is a loooooong title
  </h1>

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Shaqi_jrvej.jpg/1200px-Shaqi_jrvej.jpg">
</div>

CSS代码 #

div {
  display: flex;
  flex-wrap: wrap;
}

div img {
  width: 400px;
  height: 100%;
}

div h1 {
  /* 改成固定字体大小如"3rem"时问题消失 */
  font-size: calc(1.625rem + 5.075vw); 
  width: 300px;
}

问题截图 #

解决方案 #

问题根源 #

flex容器默认的align-items: stretch会强制子元素高度一致，再加上图片设置了height:100%，会强制和<h1>高度匹配；而<h1>用calc动态计算字体大小，视窗变化时<h1>的实际高度会动态改变，配合固定宽度容易导致布局错乱、元素重叠。

可选解决办法 #

方法1：调整图片高度并给<h1>设置最小高度

让图片保持自身比例，同时确保<h1>有足够高度容纳文本：

div {
  display: flex;
  flex-wrap: wrap;
}

div img {
  width: 400px;
  height: auto; /* 保持图片原有比例，避免强制拉伸 */
}

div h1 {
  font-size: calc(1.625rem + 5.075vw); 
  width: 300px;
  min-height: 120px; /* 根据字体大小调整，确保文本不溢出 */
  margin: 0; /* 清除默认margin，避免布局偏差 */
}

方法2：修改flex容器的对齐方式

让子元素按自身高度排列，不强制等高：

div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* 子元素按自身顶部对齐，取消强制等高 */
}

div img {
  width: 400px;
  height: auto;
}

div h1 {
  font-size: calc(1.625rem + 5.075vw); 
  width: 300px;
  margin: 0;
}

方法3：用flex属性替代固定宽度

让<h1>在小视窗下自动调整宽度，配合flex-wrap更合理地换行：

div {
  display: flex;
  flex-wrap: wrap;
}

div img {
  width: 400px;
  height: auto;
  flex: 0 0 400px; /* 固定宽度，不缩放 */
}

div h1 {
  font-size: calc(1.625rem + 5.075vw); 
  flex: 1 1 300px; /* 允许缩放，最小宽度300px */
  margin: 0;
}

以上三种方法都能在保留calc流式字体的前提下，避免元素重叠，可根据实际布局需求选择。

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