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?

Just a tip, don't add vendor prefixes unless you absolutely need them. I think you have more prefixed code here than non. Get your code working in your primary browser, then add prefixes for any properties on *versions of other browsers* that need it to work. — TylerH, Jan 16 '17 at 01:34
@TylerH it is pretty unpleasant to look at, I know, but it is easy for me to do using Bourbon, and the Sass document the CSS is compiled from is not nearly as hard to work with as the prefix-loaded CSS. From what caniuse.com says, it bumps up the site's browser compliance by about 10%, which seems worth it. I really don't want to actually think about browser compatibility, this gets me out of that. — kim holder, Jan 16 '17 at 01:43

score 3 · Answer 1 · edited May 23 '17 at 12:08

3

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?

edited May 23 '17 at 12:08

Community

1
1

answered Jan 16 '17 at 01:58

Michael Benjamin

346,931
104
581
701

The image's parent (`header`) has a fixed height of 290px. Chrome keeps the image within those bounds. FF doesn't; it needs a command. – Michael Benjamin Jan 16 '17 at 02:05
Sure, but then why does the body layout work fine without a defined height? I see what you mean, I just wonder why there was no need for that in the section below the header. – kim holder Jan 16 '17 at 02:09
The BEFORE issue was an image height problem in a particular browser. The AFTER issue may be totally different. – Michael Benjamin Jan 16 '17 at 02:17
Have you tried removing `flex-wrap: wrap` (and prefixed versions) from `.container`? – Michael Benjamin Jan 16 '17 at 02:21
Fair enough, but what i'm saying is true in the Before case. The container class and everything inside it has no defined height, but it works. That may be because there is nothing underneath it. Yes, removing wrap fixes the problem, except that it then doesn't wrap and so it breaks on narrow screen sizes, which is why wrap was there. – kim holder Jan 16 '17 at 02:23
On Chrome and Firefox here, defining a height for the image, removing `flex-wrap: wrap` from `.container`, and tweaking the flex sizing of `section` and `aside`, seem to result in the layout you are trying to achieve. – Michael Benjamin Jan 16 '17 at 02:26
You may need to add a media query to adjust the layout for different screen sizes. For instance, put `flex-wrap: wrap` in a media query for smaller screens. – Michael Benjamin Jan 16 '17 at 02:27
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133233/discussion-between-kim-holder-and-michael-b). – kim holder Jan 16 '17 at 02:36
Thanks for your last comment. Btw, you can always post messages here. The option to chat is just a suggestion. It helps avoid too much clutter in the main post. – Michael Benjamin Jan 16 '17 at 03:52

dippas · Answer 2 · 2017-01-16T01:52:10.977

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>

The guide you link to doesn't indicate anything about what the browser assumes if you use flex-grow instead of a flex shorthand statement. [This article](https://css-tricks.com/flex-grow-is-weird/) helps, but it may be a question of going through the W3 spec to see how exactly this is handled. — kim holder, Jan 16 '17 at 02:42
Did you do what I told in my updated answer? if I understood correctly it will fix your layout issues. I linked to that guide, so you can have a sense of what was the issue regarding `flex-basis` — dippas, Jan 16 '17 at 02:43
I did except i didn't remove the min-widths, because they are what trigger the switch to wrapping. The guide you point to doesn't say anything that indicates to me that this is the reason for the problem, though. The answer by Michael_B also works without touching the flex-grow statements. I'm inclined to use that approach, it is cleaner and allows me to continue to use the vendor-prefix mixins i have that maximize compatibility. — kim holder, Jan 16 '17 at 02:57
did you read the comments in the snippet that I removed just for demo here on this answer?? the only thing I changed in your real code was this: >> `flex-grow:1` to `flex: 1` , can't be simpler than this. Go ahead and use all the vendors and mixins you want, I just presented a simplified and working demo — dippas, Jan 16 '17 at 03:01
They were removed. If one didn't go through doing the code, there would be no way to know if that affected the outcome or not. So, i clarified that they don't. Bourbon does not have a mixin for a shorthand flex statement. It has one for each of the elements in that shorthand, though. — kim holder, Jan 16 '17 at 03:15
Then use what I said in my answer `flex-basis:0` with the `flex-grow:1` it's not that hard — dippas, Jan 16 '17 at 03:18
It has taken a lot of fiddling to get this to work for something that isn't that hard. I don't get the feeling you actually looked much at the pages in the question. There were wrapping issues, flex-basis: 0 doesn't work in several instances, and in some spots min-width is needed as a supplement. I gave you some indications of why your answer is not that clear. — kim holder, Jan 16 '17 at 04:07
Again use `min-width`.. I only removed for this demo so everyone could see the text and hide scrollbar. The `flex-basis:0` fixes your main layout issue afaik which is having 2 columns side by side — dippas, Jan 16 '17 at 09:34

Flexbox items not displaying correctly on Firefox

2 Answers2