Почему длинная строка ломает вёрстку?

Question

[HitGirl]

Здравствуйте!
В данном примере, красный блок должен заканчиваться на одной линии с оранжевым, но из-за длинной строки, вёрстка съезжает. Подскажите, пожалуйста, как это можно исправить? Горизонтальная полоса прокрутки должна остаться.

Comments

[Ankhena]

Тут целый пакет несчастий.

1. после margin:0 нет ;
2. bordder-box пишется не так.
3. В calc указаны 3rem. 2 из них уходят на марджин у pre. А третий должен компенсировать полосу прокрутки. Но этого мало.

Вывод: не стоит задавать фикс ширины трем блокам. Если двум нужна фикс, третьему оставляйте что осталось. Можно использовать flex-grow. Но я предпочитаю гриды.

Answer 1

[iBird Rose]

.center {min-width: 0;}