1

I just completed this website: http://groepsmanager-rspo.com. It renders perfectly in modern browsers such as Chrome 47 and Internet Explorer 11.

In Microsoft Edge, the 5% padding-top and padding-bottom are ignored. display:flex has been applied to the divs in question, and they have a percentage padding-top and padding-bottom. 

@media only screen and (min-width: 768px) {
  .row {
    display: flex;
  }
  .twothird, .threethird, .onethird, .onehalf, .onefourth, .threefourth, .twofourth {
    padding: 5%; // Padding-top and -bottom are ignored?
  }
}

Now, is Edge interpreting flexbox wrongly? Is there a way to target this problem specifically?

If not, is there a way to detect via Modernizr if the client browser is Edge, so as to use something other than display: flex in those cases?

Please note that Modernizr indicates that Edge has support for display: flex.

Thanks in advance.

Sampson
  • 265,109
  • 74
  • 539
  • 565
chocolata
  • 3,258
  • 5
  • 31
  • 60
  • 1
    according http://caniuse.com/#feat=flexbox no issues related to Edge are described. http://htmlasks.com/microsoft_edge_is_ignoring_vertical_padding_when_expressed_as_percentage seems to describe your "problem" too. Then does http://stackoverflow.com/questions/23717953/padding-bottom-top-in-flexbox-layout solves your issue? – Bass Jobsen Dec 11 '15 at 21:54
  • Hi Bass, thanks for your comment. It might be a last resource. Do you know of a way to target Edge with Modernizr? If I could disable flexbox in cases it does not give the expected padding, this would solve it... – chocolata Dec 11 '15 at 22:32

1 Answers1

2

Actually MS Edge (and FF) both are implementing this behavior the correct way

Percentage margins and paddings on flex items are always resolved against their respective dimensions; unlike blocks, they do not always resolve against the inline dimension of their containing block.

source: dev.w3.org

So there are 2 ways to make this work.

  1. Set a fixed height on the .row div.
  2. Wrap all children inside the flex parent with <div> tags.

Here is a JSFIDDLE showing both examles

Both have advantages and disadvantages and it's up to you to decide which solution you feel like is best.

-- UPDATE

To use Modernizr to detect the browser you need to add some JS to create your own feature detect by calling Modernizr.addTest

Modernizr.addTest('edge', function () {
  return !!navigator.userAgent.match(/edge/i);
});

and for FireFox

Modernizr.addTest('firefox', function () {
  return !!navigator.userAgent.match(/firefox/i);
});

This will add a class .edge or .firefox to the HTML tag if the user is using one of the 2 and then you can add specific CSS to target just Edge or FF.

Amir5000
  • 1,718
  • 15
  • 19
  • Hi Amir. It seems you and Bass are right. Maybe it would be best to avoid flexbox alltogether in my use-case. Do you know of a way to target Edge in my CSS via Modernizr? – chocolata Dec 11 '15 at 22:40
  • 1
    @maartenmachiels See my updated answer and I have not test the JS code but I believe that should work. Good Luck. – Amir5000 Dec 11 '15 at 23:08
  • I will test in the morning and let you know. Thanks a bunch! – chocolata Dec 11 '15 at 23:11
  • This is clearly the right answer. If Edge and Firefox interpret the spec correctly it's only a matter of time before the other browsers do the same. In my usecase, I will just avoid flexbox alltogether, since it will not do what I expect of it without adding more divs... The code to test in Modernizr however, doesn't seem to work for me: the "edge" classname does not seem to be appended. I'm using version 2.6.2. Thanks! – chocolata Dec 12 '15 at 08:50
  • UPDATE => It seems that in Modernizr 2.8.3 there is a test for Edge built in. In that version, I added the test for Firefox, which now provides a temporary solution while I look for something more solid. Thanks! – chocolata Dec 12 '15 at 09:20