Есть flex
контейнер в котором блок div
с текстом и абсолютным позиционированием.
Не могу понять почему текст в блочном элементе не растягивается на всю ширину, а занимает 2 строки..
Если убираю абсолютное позиционирование или ширину контейнеру увеличиваю до 230px, то текст прекрасно умещается в 1 строку.
Но, как решить проблему не меняя размеры контейнера и сохраняя позиционирование у блока?
.box-right {
margin-top: 50px;
position: relative;
display: flex;
flex-direction: column;
width: 220px;
}
.code {
font-size: 14px;
color: #225AAC;
text-align: center;
position: relative;
margin-bottom: 30px;
}
.code div {
border-bottom: 1px dashed #225AAC;
cursor: pointer;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div class="box-right">
<form class="code">
<div>I have a promocode</div>
</form>
</div>
white-space: nowrap;
илиwidth: fit-content;
?position: absolute;
позиционирование сбивает свойство ширины