Как рассчитывается ширина элементов?

Question

[r_g_b_a]

Объясните, каким образом в этом примере https://jsfiddle.net/h9f5y24j/ браузер рассчитал ширину, при которой содержимое элементов перекрывает друг друга? И это при наличии свободного пространства.

Answer 1

[Никита Михайлов]

Надо идти постепенно.

Добавив flex в класс .payment ты сделал блок .payment__col flex-элементом. Этот элемент имеет ширину равной ширине своего контента. Общая ширина этих двух фраз внутри равна 192px.

После этого ты говоришь блокам внутри .payment__col занимать 50% ширины своего родителя (который, напомню, имеет ширину в 192px). Собственно теперь этим блокам ты отвёл по 96px. А так как фразе SUBTOTAL 123 просто некуда влезть она выходит за границы своего блока и наложилась на другую фразу.