Flex Box and responsive aspect ratio issue in Firefox

Question

I am using the flex box model for the layout of my website to display a set of images. These images all have a different aspect ratio so in order to have them all have the same ratio I am using this technique. It works fine on all browser except firefox, where the height of the divs collapse. The problem seems to be related to the flex box model, because, when the display:flex propriety is turned of, the div assume the correct height again.

codePen with example here: http://codepen.io/postcom/pen/eJZVLE

Anyone has any advice on this?

HTML

<div id="container">
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
    <a href="<?php the_permalink(); ?>" class="link">
        <div class="content"></div>
    </a>
</div>

CSS

#container {
    width: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    background-color: yellow;
}

.link {
    display: block;
    width: 27%;
    box-sizing: border-box;
    margin: 30px;
    padding-bottom: 30%;
    position: relative;
    overflow: hidden;
    text-align: center;
    background-color: blue;
}

.link .content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself**. Although you have provided a link to an example, if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Dec 18 '15 at 18:22

vals · Accepted Answer · 2015-12-18T21:24:39.097

Adding an extra div seems to solve the issue in FF.

The problem being that the padding trick doesn't work for flex items in FF, do it for the flex item child

#container {
  width: 50%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  flex-flow: row wrap;
  background-color: yellow;
}
.link {
  display: block;
  width: 27%;
  box-sizing: border-box;
  margin: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: blue;
}
.wrapper {
  padding-bottom: 100%;
}
.link .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: red;
}

<div id="container">
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
  <a href="<?php the_permalink(); ?>" class="link">
    <div class="wrapper">
      <div class="content"></div>
    </div>
  </a>
</div>

Great, thank you, that was it. Strange that it worked on other browsers though… — pessimo, Dec 18 '15 at 20:04
May be I didn't express myself well... I think it's a FF bug. Happy that it helped ! — vals, Dec 18 '15 at 21:24

score 0 · Answer 2 · answered Dec 18 '15 at 15:42

For images to keep their original aspect ratio it's best to have a surrounding <div> container, whose width OR height you set in pixels (depending on portrait or landscape), the other one gets <auto. The <img> itself gets settings as below. All this is independent from flexbox.

.container {
height: 200px;
width: auto;
}

.container > img {
height: 100%;
width: auto;
}

OR:

.container {
width: 200px;
height: auto;
}

.container > img {
width: 100%;
height: auto;
}

I don't need images to keep their native aspect ratio. In fact quite the opposite of that. — pessimo, Dec 18 '15 at 16:23

Flex Box and responsive aspect ratio issue in Firefox

2 Answers2