0

So the problem is that when I use percentages for padding/margin top/bottom for elements inside the flex box, they are ignored by Firefox, all other browsers seem to be working fine.

See code snippet below in Chrome and then in Firefox and compare results:

 * {
 box-sizing: border-box;
 }
 .box {
 width:32.5%;
 margin-right:1.25%;
 margin-bottom:1.25%;
 border: 1px solid red;
 padding: 2%;
 }
 .last {
 margin-right:0;
 }
<div style="display:flex;flex-wrap:wrap;">
 <div class='box'>
  <div>BOX<br>new line</div>
 </div>
 <div class='box'>
  <div>BOX</div>
 </div>
 <div class='box last'>
  <div>BOX</div>
 </div>
 <div class='box'>
  <div>BOX</div>
 </div>
 <div class='box'>
  <div>BOX<br>new line<br>one more line</div>
 </div>
 <div class='box last'>
  <div>BOX</div>
 </div>
</div>

I know that Firefox is "following the rules" of how vertical percentages should be defined but this just drives me crazy. I haven't found a workaround yet. I've seen this post but it doesn't seem like it helps me really.

EDIT: I know I can use px or em but I want to avoid doing that for multiple media queries since my design has to be responsive and I would hate to hardcode pixels.

Community
  • 1
  • 1
dima
  • 1,181
  • 1
  • 9
  • 20
  • 1
    The solution is to not use percentage padding or margins in a flex container. As the spec says, browser behavior will vary. http://stackoverflow.com/a/36783414/3597276 – Michael Benjamin Aug 31 '16 at 03:50
  • @Michael_B yeah I know, but I was hoping for some kind of workaround by adding new elements to the layout maybe... see my EDIT in the original post. – dima Aug 31 '16 at 03:59

0 Answers0