I want to have a square div inside a flexbox. So I use:

```css
.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
  padding-bottom: 50%;
}
```

```html
<div class="outer">
  <div class="inner">
    <a>hehe</a>
  </div>
</div>
```

This works fine in Chrome. But in Firefox, the parent squeezes to just one line. 

How do I solve this in Firefox? I use version 44.

You can also view the code at <https://jsbin.com/lakoxi/edit?html,css>