CODEWITHSUNDEEP
htmlcssfirefoxflexbox
Robby
Robby

Reputation: 335

Flexbox not working properly with Firefox

On Chrome, the flexbox keeps the body of the page vertically centered on the page. However, on firefox, the page is not vertically centered and all of the content is moved as far to the top of the page as possible which can be seen in the picture and codepen below.

Firefox: not working https://i.sstatic.net/nPhS3.jpg

Chrome working https://i.sstatic.net/WuKaJ.jpg

Example of problem: https://codepen.io/robbyjm/pen/PLeQVY?

html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

html body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

html body main {
  display: flex;
  flex-direction: column;
}

html body main .weather-nav {
  display: flex;
}

html body main .weather-nav .weather {
  text-align: center;
}

html body main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

html body main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

html body main form input[type="search"]:focus {
  outline: none;
}

html body main nav {
  display: flex;
  justify-content: center;
}

html body main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

html body main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

html body main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

html body main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

html body main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<html>

<head>
  <script src="weather.js" type="text/javascript"></script>
  <script src="bitcoin.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://use.typekit.net/cnw4ewi.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>startpage</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <header></header>
  <main>
    <div class="weather-nav">
      <form action="https://duckduckgo.com/?q=" method="GET">
        <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
      </form>
      <div class="weather">
        <div id="u"></div>
        <div id="t"></div>
      </div>
    </div>
    <nav>
      <ul class="bookmark-group">
        <li>dev</li>
        <hr>
        <li>social</li>
        <hr>
        <li>storage</li>
        <hr>
        <li>web</li>
      </ul>
      <ul class="bookmark">
        <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
        <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
        <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
        <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
        <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
        <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
        <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
        <hr>
        <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
        <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
        <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
        <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
        <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
        <hr>
        <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
        <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
        <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
        <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
        <hr>
        <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
        <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
        <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
        <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
        <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
        <br>
      </ul>
    </nav>
  </main>
  <footer>
    <div id="s"></div>
  </footer>
</body>

</html>

Upvotes: 2

Views: 2352

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371093

You need height: 100vh on the body element. Then, to prevent a vertical scrollbar, override the default margins with margin: 0.

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}


html {
  background-color: #f7f7f7;
  font-family: interstate-mono, monospace;
  font-weight: 400;
  font-style: normal;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;  /* NEW */
  margin: 0;  /* NEW */
}

main {
  display: flex;
  flex-direction: column;
}

.weather-nav {
  display: flex;
}

.weather {
  text-align: center;
}

main form {
  margin: 1em auto !important;
  height: 45px;
  width: 490px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.06);
}

main form input[type="search"] {
  width: inherit;
  height: inherit;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0.75em;
  border-width: 0;
  font-size: 1.1em;
  font-family: interstate-mono, monospace !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

main form input[type="search"]:focus {
  outline: none;
}

main nav {
  display: flex;
  justify-content: center;
}

main nav .bookmark-group {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding-right: 2em;
}

main nav .bookmark-group hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark {
  text-align: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-weight: 300;
}

main nav .bookmark hr {
  border-color: rgba(0, 0, 0, 0) !important;
}

main nav .bookmark li {
  display: inline;
  padding-right: 0.8em;
}

main nav .bookmark li a {
  color: black;
  text-decoration: none;
}

footer {
  display: flex;
  align-self: flex-end;
}

#stack {
  color: #f48024;
  font-weight: 400;
}

#git {
  color: #24292e;
  font-weight: 400;
}

#java {
  color: #467899;
  font-weight: 400;
}

#python {
  color: #467899;
  font-weight: 400;
}

#aws {
  color: #ec912d;
  font-weight: 400;
}

#nest {
  color: #aa253a;
  font-weight: 400;
}

#hs {
  color: #fece41;
  font-weight: 400;
}

#dw {
  color: #b30939;
  font-weight: 400;
}

#canvas {
  color: #9e1b32;
  font-weight: 400;
}

#waze {
  color: #85d5ea;
  font-weight: 400;
}

#yt {
  color: red;
  font-weight: 400;
}

#reddit {
  color: #ff4500;
  font-weight: 400;
}

#rd {
  color: silver;
  font-weight: 400;
}

#dayz {
  color: #292929;
  font-weight: 400;
}

#google {
  color: #1da362;
  font-weight: 400;
}

#mf {
  color: #0e2866;
  font-weight: 400;
}

#eye {
  color: #36393e;
  font-weight: 400;
}

#vim {
  color: navy;
  font-weight: 400;
}

#react {
  color: #61dafb;
  font-weight: 400;
}

#js {
  color: #f5f9fa;
  font-weight: 400;
}

#ct {
  color: #ff9800;
  font-weight: 400;
}

#bttn {
  color: #fffde7;
  font-weight: 400;
}

#animate {
  color: #7b8993;
  font-weight: 400;
}
<header></header>
<main>
  <div class="weather-nav">
    <form action="https://duckduckgo.com/?q=" method="GET">
      <input type="search" name="q" placeholder=" welcome back" autoFocus></input>
    </form>
    <div class="weather">
      <div id="u"></div>
      <div id="t"></div>
    </div>
  </div>
  <nav>
    <ul class="bookmark-group">
      <li>dev</li>
      <hr>
      <li>social</li>
      <hr>
      <li>storage</li>
      <hr>
      <li>web</li>
    </ul>
    <ul class="bookmark">
      <li><a href="https://www.stackexchange.com"><span id="stack">[</span>Exchange<span id="stack">]</span></a></li>
      <li><a href="https://www.github.com/robbyjm"><span id="git">[</span>GitHub<span id="git">]</span></a></li>
      <li><a href="https://www.ruby-lang.org/en/"><span id="dw">[</span>Ruby<span
                    id="dw">]</span></a></li>
      <li><a href="https://docs.oracle.com/javase/tutorial/"><span id="java">[</span>Java<span id="java">]</span></a></li>
      <li><a href="https://docs.python.org/3/tutorial/index.html"><span id="python">[</span>Python<span id="python">]</span></a></li>
      <li><a href="https://gist.github.com"><span id="git">[</span>Gist<span id="git">]</span></a></li>
      <li><a href="https://aws.amazon.com"><span id="aws">[</span>AWS<span id="aws">]</span></a></li>
      <hr>
      <li><a href="https://www.waze.com/livemap"><span id="waze">[</span>Waze<span id="waze">]</span></a></li>
      <li><a href="https://www.youtube.com"><span id="yt">[</span>YouTube<span id="yt">]</span></a></li>
      <li><a href="https://www.reddit.com"><span id="reddit">[</span>Reddit<span id="reddit">]</span></a></li>
      <li><a href="https://www.yelp.com/"><span id="rd">[</span>Yelp<span id="rd">]</span></a></li>
      <li><a href="https://mail.tutanota.com/login"><span id="dayz">[</span>Tutanota<span id="dayz">]</span></a></li>
      <hr>
      <li><a href="https://drive.google.com"><span id="google">[</span>GoogleDrive<span id="google">]</span></a></li>
      <li><a href="https://mixtape.moe/"><span id="mf">[</span>M.Moe<span id="mf">]</span></a></li>
      <li><a href="https://the-eye.eu/"><span id="eye">[</span>TheEye<span id="eye">]</span></a></li>
      <li><a href="https://vimm.net/?p=vault"><span id="vim">[</span>Vimms<span id="vim">]</span></a></li>
      <hr>
      <li><a href="https://reactjs.org/"><span id="react">[</span>ReactJS<span id="react">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript"><span
                            id="java">[</span>JS<span id="java">]</span></a></li>
      <li><a href="https://css-tricks.com/"><span id="ct">[</span>CssTricks<span id="ct">]</span></a></li>
      <li><a href="https://developer.mozilla.org/en-US/"><span id="mdn">[</span>MDN<span id="mdn">]</span></a></li>
      <li><a href="https://bttn.surge.sh/"><span id="animate">[</span>Bttn<span id="animate">]</span></a></li>
      <li><a href="https://daneden.github.io/animate.css/"><span id="animate">[</span>Animate<span id="animate">]</span></a></li>
      <br>
    </ul>
  </nav>
</main>
<footer>
  <div id="s"></div>
</footer>

Note that you're vertically centering the main element with justify-content: space-between. The element is thus centered on the page only because header and footer have equal heights (0px). However, once the header and footer grow, if they have differing heights, the main element will be thrown off center.

Full explanation and solutions here: Center and bottom-align flex items

Most browsers come with a default margin on the body element. It's usually 8px.

body { margin: 8px; }

This will often launch a vertical scrollbar when the body element is set to 100% height. To remove the overflow, simply override the default with:

body { margin: 0; }

Upvotes: 1

Related Questions