Hey StackOverflow community, I've been working on a web dashboard for one of my applications and recently encountered a flex box 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)
Thank you for helping me out. ~ Lahusa
Aucun commentaire:
Enregistrer un commentaire