Flexbox和Firefox flex-basis

Question

I've been doing some browser testing on my flexbox layout, and it looks great in all evergreen browsers except Firefox. It should look like this - all Grid-Cell items being given an auto flex-basis based on the item content. However on Firefox 51 (macOS) it's all one huge single column.

Here's a Codepen: http://codepen.io/toddsby/pen/jyZabo with the full example.

Here's the code I'm using

CSS

.Grid {
  display: -moz-box;
  display: -ms-flexbox;  
  display: -webkit-flex;  
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Grid-fit > .Grid-cell {
  -webkit-flex: 0 0 auto; 
  -ms-flex: 0 0 auto; 
  flex: 0 0 auto;
}

HTML

<ul class="Grid Grid-fit">
  <li class="Grid-cell">
    ...{content}
  </li>
</ul>

I looked through Philip Walton's Flexbugs but none of those suggestions made a difference. Anyone else run into this? Any help is greatly appreciated!

Answer 1

The issue lies on the svg percentage, since they are floating, dimensions are not being considered:

svg {
  width:100%;
  height:100%;
}

Change it to desired px , but note not all browsers render svgs the same:

svg {
  width: 300px;
  height: 300px;
}

Here's a code pen that maintains the layout in all browsers, although firefox has a bit more margin-bottom due to svg height.

Note also the .Grid-cell typo as mentioned by Michael_B.

http://codepen.io/anon/pen/MJQBNJ

This is Safari:

You can reduce that row gap by lowering height to let's say 200px :

But Firefox will not let you impact height only and will reduce width as well:

So you could try to workaround that gap by removing preserveAspectRatio="xMinYMin meet" on the svg and re-styling it or leave it in all browsers with a moderate gap:

Answer 2

In your demo, one key selector isn't working:

.Grid-cell (CSS) vs .Grid-Cell (HTML)

Hence, the flex: 0 0 auto isn't working, in any case.

Once that is fixed, try using flex: 1 instead of flex: 0 0 auto .

Answer 3

Solution

The key was @Syden's mention of browsers handling SVG rendering differently. It appears Firefox requires a height attribute to properly render the element. The simple solution to the broken layout was updating the .item svg css selector with a max-height property as follows:

.item svg {
  float: left;
  width: 60%;
  max-height: 300px;
}

Here's the full code example w/ bugfix on Codepen: http://codepen.io/toddsby/pen/PWRqXO

Firefox now rendering layout correctly:

Related Note: Here's a great explanation of how the SVG preserveAspectRatio works: http://unmatchedstyle.com/news/svg-and-the-preserveaspectratio-property.php