Created by: ntkme
Firefox have trouble displaying .embed-responsive in a flex container. Firefox developer said that Firefox has the correct implementation, and other browsers which show .embed-responsive normally were wrong.
This RP fixes the problem regardless of browsers' implementation by move padding into pseudo class ::before, as the padding in pseudo class will be resolved against block .embed-responsive instead of flex parent.
Spec: http://dev.w3.org/csswg/css-flexbox/#item-margins
For blocks in CSS, % padding values are always resolved against the containing block width -- but in flexbox, they're resolved against the length of the containing block's corresponding dimension (width or height).
Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.
Safari / WebKit: https://bugs.webkit.org/show_bug.cgi?id=113519 Chrome / Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=229568 Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=958714