@ligisayan

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

Всем привет!

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

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

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

  • Вопрос задан
  • 39 просмотров
Решения вопроса 1
serjikz
@serjikz
web-developer
Проблема не во flex-контейнере, а в особенности абсолютного позиционирования и центрирования таким образом (через transform: translatex()).

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

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

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы