Ich möchte ein quadratisches Div in einer Flexbox haben. Also benutze ich:

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

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

Dies funktioniert gut in Chrome. In Firefox drückt sich das übergeordnete Element jedoch nur in eine Zeile.

Wie löse ich das in Firefox? Ich benutze Version 44.

Sie können den Code auch unter @ anzeigehttps: //jsbin.com/lakoxi/edit? html, css