flexboxで%はまだ使っちゃダメっぽい(2016年5月現在)

padding-toppadding-bottomをパーセントで指定して、ブラウザが拡縮しても縦横比を崩さないというテクニックが便利でよくつかうんだけど、タイトルの通り'display: flex;'した要素の子要素 、いわゆるflex itemにはこの%で高さを指定した場合Firefoxでこれが効かなかった。(ChromeとかSafariとかは大丈夫)

でググったところ、

stackoverflow.com

なんか、仕様でまだ揉めてるのか...?

そして、

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

W3Cに書かれてるみたいね...ブラウザごとに挙動違うからpaddingやmarginにパーセント使うのやめとけと。

というわけで、flexboxではパーセント使わずに実装しなきゃいけない。どーしよっかな!