Microsoft Edge Flexbox padding behavior

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.

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.

Set a fixed height on the .row div.
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.