CSS布局问题：logo元素被推出背景图，<i>标签遭图片挤压

遇到的问题 #

• 带有logo类的div被推出背景图区域
• logo容器内的<i>标签被其中的img元素挤压到外部，添加其他文本则不会出现该情况

代码示例 #

CSS代码

* {
  margin: 0;
  padding: 0;
}

.background-image {
  background-image: url("https://solscan.io/static/media/banner-header-1.c1e47687b38c8afc4f948ebd7004acf8.svg");
  background-repeat: no-repeat;
  background-position: center top;
  height: clamp(150px, 15vh, 20vh);
  width: 100vw;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.nav-bar {
  position: relative;
  z-index: 2;
  margin: 1.2rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
}

i {
  font-size: 29px;
  color: black;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
  <title>Page title</title>
</head>
<body>
  <div class="background-image"></div>
  <header class="header">
    <nav class="nav-bar">
      <img src="https://solscan.io/static/media/logo-solana-scan.ae03f445fd27dddc90c859d8728cbb44.svg">
      <div class="logo">
         <img src="https://solscan.io/static/media/solana-sol-logo.b612f1402147c92338bed5af1879b175.svg"> 
        <i class="fa-solid fa-bars"></i>
      </div>
    </nav>
  </header>
</body>
</html>

根本原因分析 #

1. .logo被推出背景图区域的原因

.nav-bar是flex容器，设置了justify-content: space-between，但未显式设置宽度时，flex容器的默认宽度是fit-content——由内部子元素的总宽度决定。而背景图是width:100vw的绝对定位元素，占满整个视口宽度。此时.nav-bar的宽度可能远小于视口宽度，justify-content: space-between只是让内部两个子元素在.nav-bar自身宽度范围内向两端分散，看起来就像是.logo被推出了背景图区域。

当给.nav-bar设置宽度（比如width: 100%），flex容器会占满父元素（header默认是块级元素，宽度撑满视口）的宽度，此时justify-content: space-between才能让子元素真正分布在视口左右两端，.logo自然不会超出背景图范围。

2. <i>被img挤压到外部的原因

.logo是flex容器，内部的img和<i>是flex子元素。默认情况下，flex容器宽度为fit-content，由内部元素总宽度决定。img是替换元素，宽度由自身固有尺寸决定，如果这个尺寸加上<i>的宽度，超过了.nav-bar能提供的空间（.nav-bar本身宽度未设置，由子元素总和决定，可能被左侧img限制），.logo作为flex子元素会被压缩，而img的压缩优先级较低（替换元素默认不会轻易被压缩），就会把<i>挤到容器外部。

添加其他文本时，文本会撑大.nav-bar的总宽度，让.logo容器有足够空间容纳img和<i>，因此不会出现挤压情况。

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