When using percentages (%) to determine the size of my elements, Chrome seems to prefer mathematically making its own rules.
I understand that when you add 80 + 20, you get 100; right? Okay, good. Chrome understands this too. But what if we write the same equation in different ways. For example: (78 + 1 + 1) + (18 + 1 + 1) What did you get? Was it 100? Yes, me too.
So, can someone please tell me why Chrome thinks differently?
Take the two elements and place them next to each other. Then apply width:20% to one element and width:80% to the remaining element. You will notice that 100% of the page (or container) was occupied by both elements side by side. However, let this simplify and add padding of only 1% on both sides of each element. This means that one element will have width:18%; padding:1% width:18%; padding:1% , and the other element will have width:78%; padding:1% width:78%; padding:1% . Theoretically, this should have the same result: 100% of the page (or container) is occupied by both elements side by side. But in Chrome, this is simply not the case. He does not fit.
The proof is in the pudding: jsfiddle (you'll notice slight differences if you use Chrome).
This is frustrating because when it all adds up, especially with the large volume of elements that are used side by side, it can really release the layout from the bumps. I know that by creating child elements to keep track of filling and / or fields, we can avoid the situation, but this can lead to the use of markup that would otherwise be redundant.
I just need to explain why Chrome behaves this way (maybe this is a Webkit thing at all, I haven't tested it yet).
source share