Firefox, Flexbox & Overflow

Flexbox overflow issue in Firefox

Just put min-height: 0; to .container-body this will fix your issue

.container .container-body {
  min-height: 0;
}

See this answer for more details

Flex items overflowing in Firefox

You will need to set:

.form .expiry input {
  min-width: 0;
}

jsFiddle

The reason is flex items have min-width:auto set by default, and for a replaced element such as <input>, it has intrinsic dimensions. The flex item won't shrink when the total width of the input boxes exceeded.

You can also give the size attribute a smaller value (default is 20 for text input) to make it smaller:

<input type="text" size="3">

References

• Automatic Minimum Size of Flex Items
• Replaced elements
• HTML <input> attribute size

Flexbox not working properly with Firefox

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>

Firefox, Flexbox & overflow

Fix:

input { min-width: 1px; }

For vertical direction - min-height;

Different implementation of Flexbox in Firefox and Chrome

The following code works as expected in Firefox

I disagree with this because for me Chrome is behaving as expected for 2 reasons:

1. You set the width of the image to be 100% which means 100% of their containing block (container) that is defined by 600px. So each image will be 600px

2. The image cannot shrink past its content size due to the default min-width configuration (note that using unset is equivalent to initial in this case so it's somehow useless). So the image will be kept at 600px

If you add min-width:0 the image will shrink only in width:

.r {  width: 100%;  /*height: auto; useless */  min-width: 0;  max-width: 100%;}
.container {  display: flex;  width: 600px;}

<div class="container">  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" >  <img src="https://via.placeholder.com/1000x500" class="r" ></div>

firefox overflow-y not working with nested flexbox

tl;dr: you need min-height:0 in your .level-0-row2 rule. (Here's a codepen with that fix.)

More detailed explanation:

Flex items establish a default minimum size that's based on their children's intrinsic size (which doesn't consider "overflow" properties on their children/descendants).

Whenever you've got an element with overflow: [hidden|scroll|auto] inside of a flex item, you need to give its ancestor flex item min-width:0 (in a horizontal flex container) or min-height:0 (in a vertical flex container), to disable this min-sizing behavior, or else the flex item will refuse to shrink smaller than the child's min-content size.

See https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 for more examples of sites that have been bitten by this. (Note that this is just a metabug to track sites that were broken by this sort of issue, after this spec-text was implemented -- it's not actually a bug in Firefox.)

You won't see this in Chrome (at least, not as of this posting) because they haven't implemented this minimum sizing behavior yet. (EDIT: Chrome has now implemented this min-sizing behavior, but they may still incorrectly collapse min-sizes to 0 in some cases.)

---

Related Topics