Q:

Flex Box and responsive aspect ratio issue in Firefox

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;
}

A:

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>

