Почему элемент с absolute не растягивается по своему содержимому?

Question

[Александр Косицын]

прикладываю код:
https://jsfiddle.net/ecxf926z/2/
при наведении (hover) на элемент "мои контакты" выскакивает подсказка, с информацией. Почему то эта информация переносится на новую строку.
скриншот проблемы:
take.ms/mheJj

Элемент от которого позиционируется всплывашка это flexitem (т е ближайший элемент с position:relative). Заметил, что если делать без флексов, то блок растягивается по содержимому. И также если увеличить flexitem, то увеличится и width всплывашки. Есть какая-то особенность позиционирования от flexitem - ов?

Answer 1

[zoozag]

Простой эксперимент показывает, что absolute блок по умолчанию не выходить за рамки своего родителя по ширине.
https://jsfiddle.net/gk6oofud/3/

Вашу проблему решит :
.contacts__phone {
white-space: nowrap;
}

Comments

[Александр Косицын]

Вы правы. Не выходит. Но видимо его ограничивает не ширина родителя, а поток документа. Т к поток идет слева-направо, то если сдвигаем блок направо получается блок сужается до конца потока элемента родителя, а выйдя из него берет ширину максимального слова в себе(в данном случае популяризации). Если блок сместить влево, то его поток ограничивать не будет снизу по коду и он будет спокойно тянутся даже за пределы своего родителя.
Ваш пример на фидле:
https://jsfiddle.net/gk6oofud/4/ (можно поиграться еще с left)
скриншоты о чем я
take.ms/fE7AK
take.ms/wcRbZ

И тоже самое для моего примера:
take.ms/VeZTo
take.ms/QLTFI

[Александр Косицын]

Свойство no-wrap заставляет элемент не переносить слова на другую строку, но при этом если строка будет длинная то она может вылезти за пределы экрана. Это все без заданной ширины позиционированного элемента.

Спасибо за помощь в поиске ответа

Answer 2

[Кирилл]

Потому что абсолютно позиционированный элемент обычно скукоживается до минимально возможного размера, если явно не указано иное. В вашем случае его ограничивает длинна строки с емейлом, чтобы телефон не переносился добавьте элементу contacts__phone css-свойство white-space со значением nowrap