CSS flex box wrong size issue on Mozilla Firefox

user_13332329 0
Viewed 216

I've been working on a web dashboard for one of my applications and recently encountered a Flexbox scaling issue, which only seems to appear on Firefox.

I'm using a header, which contains two divs aligned on the left and right side. The left and right divs are of display type inline-flex, which makes the boxes shrink to their content's size. This, however, doesn't seem to work on Mozilla Firefox. Other browsers I've tested and which all show correct behavior are Chrome, Safari (mobile), Internet Explorer and Edge.

How can I work around this issue or even fix it? In the current page I added colored boxes to highlight the wrong calculated sizes.

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)

flexbox web firefox css html
1 Answers

Disclaimer: I'm not entirely sure if my explanation is 100% correct, but the solution below seems to fix the problem.

The problem seems to be that no absolute height has been set for the body, containers or images. Although the height of the images seems to be correct in Firefox, the original width of the images seems to be used when calculating the required width (you can see this if you comment out .rounded-icon{ height: 80%;} and the widths of the containers don't change), which eventually leads to the wrong width of the containers.

So to fix the problem you can simply assign an absolute height to either the body, the containers or the images (vh works, too):

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

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

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