Flexbox items not displaying correctly on Firefox

Question

At first this problem was just occurring in the header, now when I tried to fix it by using Bourbon mixins with the vendor prefixing all worked out, it is happening in the main body too. At least this may provide a way to isolate the problem, as I've posted the page before the fix, and after, for comparison.

Before, where the section and aside in the div with the container class are displaying properly in the current version of Firefox - two responsive columns.

After, where those parts are stacking and ignoring flexbox, just like the header.

The CSS for Before is:

.container {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: stretch; }

section {
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  padding: 15px;
  min-width: 350px;
  flex: 1;
  margin-top: 3vw;
  margin-left: 6vw; }

aside {
  min-width: 250px;
  flex: 0.5;
  margin-top: 5vw;
  display: flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: stretch; }

I think that's everything that's relevant. The vendor prefixes are not in the right order, but it is working.

.container {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  box-pack: end;
  -webkit-justify-content: flex-end;
  -moz-justify-content: flex-end;
  -ms-justify-content: flex-end;
  -o-justify-content: flex-end;
  justify-content: flex-end;
  -ms-flex-pack: end;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch; }

section {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 15px;
  min-width: 350px;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  margin-top: 3vw;
  margin-left: 6vw; }

aside {
  min-width: 250px;
  flex: 0.5;
  margin-top: 5vw;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column nowrap;
  -moz-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  box-pack: start;
  -webkit-justify-content: flex-start;
  -moz-justify-content: flex-start;
  -ms-justify-content: flex-start;
  -o-justify-content: flex-start;
  justify-content: flex-start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -moz-box-align: stretch;
  box-align: stretch;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
  -ms-flex-align: stretch; }

There, all the vendor prefixes seem proper, but the aside stacks under the section, the same problem as the header classes sec1 and sec2. I checked the Flexbugs GitHub repo and didn't find an explanation there. Does someone see the issue?

Answer 1

In the BEFORE layout, the issue seems to be resolved by simply defining a height for the image:

.sec1 {
    flex-grow: 4;
    min-width: 400px;
    padding-right: 60px;
    margin-top: 2vw;
    height: 100%; /* new */
}

Chrome automatically confines the image to the height of the parent:

header { height: 290px; }

Firefox apparently needs an instruction to do the same.

---

Also, with regard to your vendor prefixes, it's always better to list the standard property (W3C version) last – after all the prefixed versions. For more details:

• What is the proper way to order vendor prefixes for flexbox?

Answer 2

Your problem is you having flex-grow:1 which mean you will have by default flex-basis: auto, if you use flex:1 it will set flex: 1 1 0 (flex-basis:0), fixing your issue

Take a look at this great guide about flexbox

Here is a simplified snippet

.container {
  display: flex;
  flex-wrap: wrap;
}
section {
  flex: 1;
  margin-left: 6vw; 
  margin-top: 3vw;
  /*min-width: 350px; - removed for demo */
  padding: 15px;
}
aside {
  flex: 0.5;
  margin-top: 5vw;
 /* min-width: 250px; - removed for demo */
}

<div class="container">
  <section>
    <div class="outerDiv">
      <div class="innerDiv intro">
        <h1>Realistic Lunar Colony, Coming Online</h1>
        <p>
          This project is building a series of virtual colonies on the Moon. They will be richly detailed and interactive presentations that are entirely plausible, technically and scientifically. They will examine all the questions, consider all the implications.
          When humanity undertakes ventures on the scale of space settlement, it matters a great deal how many people have given it real thought beforehand. These colonies serve that purpose.
          <br>
          <br>The first colony created will show a full town with a population of 20,000. It will have developed industries and facilities, spacious beautiful architecture, transport systems moving high volumes of people and cargo around the Moon and the
          solar system. It shows what happens just beyond the tipping point, when technology enables a space boom. To evaluate the importance of space exploration, this is the stage that must be understood.
          <br>
          <br>The next two colonies work outwards from there... forwards to the city that grows from the town, when technology allows a segmented glass dome to be placed over a crater 22 km across, becoming home to a million people... and backwards to the
          first missions that develop the basic techniques and infrastructure that make it all possible.
          <br>
          <br>These environments will be places to explore, create, collaborate, tell stories, and above all to learn and to contemplate our future. To that end, the project assumes an ideal political environment, in which a broad alliance of countries pursues
          lunar settlement with determination and vision, making the best technical decisions and investing as much as it takes to do it properly. In this way the project can educate regarding the real gamut of options before us, and the complete scope
          of such a vast endeavor.
          <br>
          <br>The entire project will always be open source, free of copyright, and free of charge. In this way, as long as it has a strong core framework, it has incredible potential for growth. Some virtual world project along these lines is going to explode
          in the near future. The time is right. Once a world is vivid enough, and provides the right tools, it will mushroom as talented people see the potential and dive in. Never have there existed ways for so very many people to collaborate so powerfully.
          Moonwards can reach towards two final frontiers - the one above our heads, and the one inside our heads. Let us see how powerful vision can be.
          <br>
          <br>All the project's files are on the <a href="https://github.com/briligg/moonwards">
GitHub repository of Moonwards</a>. It is at an early stage. It will always be 'under construction', though - that's its nature. You will see this revamped website filling out in the coming weeks, and then get new content regularly as the project advances.
          The same will happen to the repo, after that. You will see the models changing and new models being added, animated, and supplemented with other media. When the first, simple version of the virtual colony comes online, then we are really rolling.
          If you are inclined to take part, please contact me, comment in one of the sections provided, or use the other contact options shown on the <a href="project.html">Project</a> page.
        </p>
        <p class="byline">
          Jan. 11, 2017 by Kim -- kim@moonwards.com
        </p>
      </div>
    </div>
  </section>
  <aside>
    <div class="sideDiv" id="RSS-feed">
      <p id="item2" class="atom"><span class="datetime">Mon, 07 Nov 2016 19:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">Lalande map</a></span><span class="description">Kim has finished composing an extremely detailed map of the Lalande crater. It is a huge file, but available at request.</span>
      </p>
      <p id="item1" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:50:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">3D models</a></span><span class="description">We now have 3D content available. Blend4web and Sketchfab models are now viewable in your browser.</span>
      </p>
      <p id="item0" class="atom"><span class="datetime">Tue, 01 Nov 2016 21:45:00 GMT</span><span class="title"><a href="http://www.moonwards.com/">News feed for Moonwards</a></span><span class="description">For all of you out there wanting to keep up with Moonwards, we are now going to post brief news to this handwritten RSS feed. Also consider our <a href="https://moonwards1.blogspot.com/feeds/posts/default">blog feed</a></span>
      </p>
    </div>
    <div class="sideDiv">
      <div class="framewrap frame16x9">
        <iframe src="https://www.youtube.com/embed/vF--hweQ1Ec" allowfullscreen=""></iframe>
      </div>
    </div>
  </aside>
</div>