Mozilla Firefox 上的 CSS flex 框大小错误问题答案

【问题标题】：CSS flex box wrong size issue on Mozilla FirefoxMozilla Firefox 上的 CSS flex 框大小错误问题
【发布时间】：2021-07-12 22:08:55
【问题描述】：

我一直在为我的一个应用程序开发 Web 仪表板，最近遇到了 Flexbox 缩放问题，该问题似乎只出现在 Firefox 上。

我正在使用一个标题，其中包含左右对齐的两个 div。左右 div 的显示类型为 inline-flex，这使得盒子缩小到其内容的大小。但是，这似乎不适用于 Mozilla Firefox。我测试过并显示正确行为的其他浏览器包括 Chrome、Safari（移动）、Internet Explorer 和 Edge。

我怎样才能解决这个问题，甚至解决它？在当前页面中，我添加了彩色框以突出显示错误的计算尺寸。

Here's an image of a comparison between Chrome (left) and Firefox (right)

HTML：

body {
  background-color: #2C2F33;
  color: #99AAB5;
  margin: 0px;
  font-size: 15px;
}

header {
  width: 100%;
  height: 8%;
  background-color: #23272A;
  margin: 0px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px dashed blue;
  box-sizing: border-box;
}

.dropdown {
  display: block;
  border: 2px dotted green;
  box-sizing: border-box;
}

.dropdown-button {
  background-color: #7289DA;
  color: white;
  padding: 10px;
  font-size: 15px;
  border: none;
  border-radius: 3px;
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #677bc4;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  /*min-width: 160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content input {
  color: black;
  background-color: #2C2F33;
  color: #99AAB5;
  padding: 12px 16px;
  text-decoration: none;
  border: none;
  width: 100%;
}

.dropdown-content input:hover {
  background-color: #23272A;
  color: #FFFFFF;
}

.servers {}

.dropdown:hover .dropdown-content {
  display: block;
}

.rounded-icon {
  border-radius: 50%;
  height: 80%;
}

#hltv-logo {
  display: inherit;
}

#useravatar {
  display: inherit;
}

#username {
  display: inherit;
}

#left-header {
  height: 100%;
  display: inline-flex;
  border: 2px dotted red;
  box-sizing: border-box;
  align-items: center;
  min-height: 0;
  min-width: 0;
}

#right-header {
  height: 100%;
  display: inline-flex;
  border: 2px dotted red;
  box-sizing: border-box;
  align-items: center;
  min-height: 0;
  min-width: 0;
}

<html>

<head>
  <link rel="icon" href="favicon.png">
  <title>HLTV Dashboard</title>
  <link rel="stylesheet" href="css/dashboard.css">
</head>

<body>
  <header>
    <div id="left-header">
      <img id="hltv-logo" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
      <form method="post" class="dropdown">
        <button class="dropdown-button">Servers</button>
        <div class="dropdown-content">
          <input type="submit" class="servers" name="26700" value="Hardwaretalk"><br><input type="submit" class="servers" name="40218" value="1 Jahr Explosion"><br><input type="submit" class="servers" name="45396" value="the good side of EA"><br>
          <input
            type="submit" class="servers" name="74863" value="Zsunamy"><br> </div>
      </form>
    </div>
    <div id="right-header">
      <img id="useravatar" class="rounded-icon" src="https://cdn.discordapp.com/avatars/224037892387766272/e8147fb1012d23670d61698a9b42f60a.jpg">
      <div id="username">Revilum</div>
    </div>
  </header>


</body>

</html>

Here's a fiddle of the site (Note: I had to change one of the images)

【问题讨论】：

您的小提琴和上面的代码 sn-p 都可以在 Firefox 中正常工作，因此您的问题一定是由其他原因引起的。在标题的左侧框中是否有 min-width、width 或 flex-basis 设置？
@Johannes 我已经在本地尝试过代码，但它确实在 Firefox 中不起作用（fiddle 和 sn-p 也对我有用）。我假设包装代码的 sn-p 和小提琴以某种方式解决了我的答案中描述的问题？！
顺便说一句：您缺少 position: relative 设置 form 或 #left-header 以使其用作绝对定位下拉列表的位置参考。这四个提交按钮当然不是有效的 HTML - 你应该找到另一个解决方案。

标签： html css web firefox flexbox

【解决方案1】：

免责声明：我不完全确定我的解释是否 100% 正确，但下面的解决方案似乎可以解决问题。

问题似乎是没有为正文、容器或图像设置绝对高度。尽管图像的高度在 Firefox 中似乎是正确的，但在计算所需宽度时似乎使用了图像的原始宽度（如果您注释掉 .rounded-icon{ height: 80%;} 并且容器的宽度不会改变，则可以看到这一点)，最终导致容器宽度错误。

所以要解决这个问题，您可以简单地为正文、容器或图像指定一个绝对高度（vh 也可以）：

.rounded-icon {
  height: 30px; /* instead of 80% */
}

/* OR */
header {
  height: 8vh; /* instead of 8% */
}

/* OR */
body {
  height: 100vh;
}

【讨论】：