Проблема не во flex-контейнере, а в особенности абсолютного позиционирования и центрирования таким образом (через transform: translatex()).
Любой блок, спозиционированный абсолютно и которому не даны размеры, будет всегда пытаться ужать самого себя (и контент в себе) если он вылазит за родителя. Уберите transform - увидите, что блок у вас прилипает к правому краю вашего элемента и он уже в 2 строки сразу. Если вы сделаете left меньше (в вашем случае хотя бы 48%)- текст будет в одну строку даже с transform (но эффекта центрирования конечно тогда не будет). Всё из-за особенности позиционирования. Если использовать right - будет тоже самое.
В то же время свойство transform делает следующее - оно не перемещает сам по себе элемент, а перемещает, можно сказать, отражение этого элемента. То есть сам по себе элемент остается на своём месте (left: 50%;) а transform просто двигает его "отражение" влево. Грубо говоря браузер фоткает ваш элемент, скрывает его и фотку двигает на нужное расстояние. Элемент то у вас в 2 строки - значит и на "фотке" он будет в 2 строки.
Решить это можно только путем задания ширины блоку, который позиционируется абсолютно (задать ему нужную ширину).
Также можно ещё как вариант центрировать блок через отрицательный левый margin, задавая точное значение в px (половину от ширины блока, который позиционируете).
Если вам нужна резина - подумайте над тем, чтобы отказаться от абсолютного позиционирования. Если вам нужна и резина и абсолютное позиционирование - делайте ширину этому блоку 100% (будет он тянуться на всю ширину его родителя).
Оч надеюсь, что объяснил понятно, в тексте такие штуки объяснять достаточно проблематично.
Простой
