Почему текст блока с абсолютным позиционированием внутри flex контейнера не растягивается на всю ширину?
==========================================================================================================

 Всем привет!  

  

Есть *flex* контейнер в котором блок *div* с текстом и абсолютным позиционированием. Не могу понять почему текст в блочном элементе не растягивается на всю ширину, а занимает 2 строки..  

  

Если убираю абсолютное позиционирование или ширину контейнеру увеличиваю до **230px**, то текст прекрасно умещается в 1 строку.  

  

Но, как решить проблему не меняя размеры контейнера и сохраняя позиционирование у блока?  

  

snippet 

 Проблема не во flex-контейнере, а в особенности абсолютного позиционирования и центрирования таким образом (через `transform: translatex()`).  

  

Любой блок, спозиционированный абсолютно и которому не даны размеры, будет всегда пытаться ужать самого себя (и контент в себе) если он вылазит за родителя. Уберите transform - увидите, что блок у вас прилипает к правому краю вашего элемента и он уже в 2 строки сразу. Если вы сделаете left меньше (в вашем случае хотя бы 48%)- текст будет в одну строку даже с transform (но эффекта центрирования конечно тогда не будет). Всё из-за особенности позиционирования. Если использовать right - будет тоже самое.  

  

В то же время свойство transform делает следующее - оно не перемещает сам по себе элемент, а перемещает, можно сказать, отражение этого элемента. То есть сам по себе элемент остается на своём месте (`left: 50%;`) а transform просто двигает его "отражение" влево. Грубо говоря браузер фоткает ваш элемент, скрывает его и фотку двигает на нужное расстояние. Элемент то у вас в 2 строки - значит и на "фотке" он будет в 2 строки.  

  

Решить это можно только путем задания ширины блоку, который позиционируется абсолютно (задать ему нужную ширину).  

  

Также можно ещё как вариант центрировать блок через отрицательный левый margin, задавая точное значение в px (половину от ширины блока, который позиционируете).  

  

Если вам нужна резина - подумайте над тем, чтобы отказаться от абсолютного позиционирования. Если вам нужна и резина и абсолютное позиционирование - делайте ширину этому блоку 100% (будет он тянуться на всю ширину его родителя).  

  

Оч надеюсь, что объяснил понятно, в тексте такие штуки объяснять достаточно проблематично.