html - Why doesn't percentage padding / margin work on flex items in Firefox? -
i want have square div inside flexbox. use:
.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>
this works fine in chrome. in firefox, parent squeezes 1 line.
how solve in firefox? use version 44.
you can view code @ https://jsbin.com/lakoxi/edit?html,css
from flexbox specification:
authors should avoid using percentages in paddings or margins on flex items entirely, different behavior in different browsers.
here's more:
4.2. flex item margins , paddings
percentage margins , paddings on flex items can resolved against either:
- their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
- the inline axis (left/right/top/bottom percentages resolve against width)
a user agent must choose 1 of these 2 behaviors.
note: variance sucks, accurately captures current state of world (no consensus among implementations, , no consensus within csswg). csswg’s intention browsers converge on 1 of behaviors, @ time spec amended.
Comments
Post a Comment