How is the width of elements calculated?

Question

css

Explain how in this example https://jsfiddle.net/h9f5y24j/ the browser calculated the width at which the contents of the elements overlap each other? And this is in the presence of free space.

Answer 1

We must go gradually.
By adding flex to the class, .paymentyou've made the block a .payment__colflex element. This element has a width equal to the width of its content. The total width of these two phrases inside is 192px.
After that, you tell the boxes inside .payment__col to take up 50% of the width of their parent (which, remember, is 192px wide). Actually, now you have taken 96px to these blocks. And since the phrase SUBTOTAL 123 simply has nowhere to fit in, it goes beyond the boundaries of its block and overlaps with another phrase.