我有一個簡單的HTML和CSS代碼。我正在使用CSS計算功能來創建流暢的排版。 懸停當我縮小窗口時，圖像與文本重疊。當我使用像3rem這樣的固定字體大小代替calc函數時，這個問題就消失了。

使用CSS calc函數時有什么方法可以停止重疊？

<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>

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


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

div h1 {
  /*It works when I set fixed font-size size like "3rem" */
      font-size: calc(1.625rem + 5.075vw); 
      width: 300px;
}

演示:https://jsfiddle.net/n1gsj3x5/1/

要解決這個問題，您可以做兩個更改:在兩個元素之間添加間隙，并以這種方式實現自動換行策略:

div {
  display: flex;
  column-gap: 5px; /* this is good to add  */
  flex-wrap: wrap;
}
  
div img {
  width: 400px;
  height: 100%;
}
  
div h1 {
  font-size: calc(1.625rem + 5.075vw); 
  width: 300px;
  word-wrap: break-word; /* This is important */
}

您可以將動態寬度設置為h1，如下所示:

div {
  display: flex;
  flex-wrap: wrap;
  gap:5px;
}


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

div h1 {
     font-size: calc(1.625rem + 5.075vw); 
     width: calc(100% - 410px);
}