Yes. People battled with this before. However solutions seem to be really localized for particular scenario. So, here’s mine:
So, well, the box on the right looks exactly how expected on other browsers, not on Firefox. Is there way to fix it? (for some weird reason, after entering website, you need to press “Run” once again for box to show up)
I might be mistaken here, but I believe Firefox is in the right here, and Chrome is in the wrong. It should resolve to 0, as per the spec
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.
http://www.w3.org/TR/css-flexbox-1/#item-margins
Since browsers can’t agree on the behavior for this, I’d just stay away from margin/padding percentages inside of flex items.
It may be better to show a picture of what you are trying to achieve as I am seeing wildly different versions in IE11 and IE edge also.
You are using too many magic numbers and percentages in that layout and some weird use of flexbox. Flexbox is best used in small doses and not for everything.
Remember also that percentage margins refer to the width of the element even for vertical margins so vertical margins in percentage are basically a non starter. However you rarely want to control 100% of the space across the screen as that gives no breathing space and ties you down into a system built on math.
You need to keep it much simpler than that and remember that flexbox is more about fluid content based sizing rather than trying to fix everything explicitly.
For example you have an inline block set to 97% width with 1% margins. That makes it 99% wide and with the whitespace behaviour of inline blocks you are likely over 100% already. Why not use a block and auto margins?
I realise this may be part of a bigger picture but alarm bells started ringing as soon as I saw html and body set to flex and height:100%.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.