Steps to reproduce
The percentage margins of an orthogonal element have to be resolved against the inline block size of the containing block.
In the attached example, the percentage margins are resolved properly against the width of the container (10% of 500px = 50px), however the size of the orthogonal element is 90px instead of 50px.
It seems to compute the available size it’s using the height of the container to resolve the percentage margins instead of the width.
BTW the very same issue is present in Chromium and WebKit, however it works fine in Firefox.
The problem has just been fixed in Chromium (https://crbug.com/808758) and a few tests have been created in WPT:
Comments and activity
Note that there’s a similar issue with paddings too.
- Microsoft Edge Team
Changed Assigned To to “Bogdan B.”
Thanks Manuel for filing the issue. I however don’t think we will be able to prioritize fixing this issue based on the issue severity at this point. I’m moving this to the backlog.