Html 使用 calc 函数设置字体大小时 Flexbox 项目重叠

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

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 */
}

Html相关问答推荐

restrict. form—text width to input s width'

我如何 Select 外部html文件元素作为选项，并显示在一个div与jQuery？

禁用与行分开的边框折叠span

Angular 15 p-对话框不使用组件 Select 器呈现HTML

Div内容防止同级大小增加

有没有办法根据另一个项目调整FlexBox项目的大小？

如何翻转卡片图像的背面

Div中的图像问题-(TailWind CSS中的网格)

在每个列宽由带有固定值的minmax()函数定义的网格中，CSS如何为列分配空间？

CSS中的转换属性是如何工作的？

Swift 以编程方式在 YouTube 嵌入视频中进入全屏

网格布局中的组件

Div 容器不会遵守边距、填充或间隙

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

如何将背景与之前的内容正确对齐

使用 R markdown 在 html 中包含图像

在shiny 的应用程序中使用图标功能时出错

如何制作一个布局，其中左侧固定为图像，右侧为按钮，中心或中间位置为文本？

如何使 Shiny 中的 selectInput Select 扩展到井面板之外或以其他方式使它们更容易被用户看到？

Primeng浮动标签溢出管理