Why doesn't percentage padding / margin work on flex items in Firefox and Edge?

Answer 1

In addition to Michael_B's answer, here is a possible workaround.

When using percent we often relate that to the viewport width, so with that in mind, viewport units vw/vh can be an option, since it works similar (responsive).

Stack snippet

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

  

    hehe
  

---

Updated based on a comment

If a square is a must, and viewport units or script can't be used, here is another trick using a dummy image.

Note, as image also a SVG or a Base64 could be used as a datauri to save an extra round trip to the server

.outer {
  display: flex;
  width: 100%;
  background: blue;
}
.inner {
  width: 50%;
  background: yellow;
}
.inner img {
  display: block;
  width: 100%;
  visibility: hidden;
}