According to the spec change from March 2013: http://lists.w3.org/Archives/Public/www-style/2013Mar/0688.html margins/paddings inside a flex container should be relative to their respective dimensions, e.g. padding-top: 50% sets padding to 50% of height, not width as it is in block layout. So far only Firefox has implemented the change which makes it impossible to use percentages for paddings in flex containers on the web. :( Related Chromium ticket: https://code.google.com/p/chromium/issues/detail?id=275327
Related spec fragment: http://dev.w3.org/csswg/css-flexbox/#item-margins
Related Internet Explorer ticket: https://connect.microsoft.com/IE/feedback/details/797724
*** This bug has been marked as a duplicate of bug 113519 ***