Chefranov
@Chefranov
Front-End, Back-End

Почему так происходит?

Имеется такой код:

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit euismod.</div>
</div>

.parent {
  position:relative;
  background-color: #f1f1f1;
}

.child {
  background-color: pink;
  padding: 20px 190px;
  position:absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
}

5a0f67fc6f38f780450912.png
Код на codepen: https://codepen.io/chefranov/pen/LOePdd
Почему блок с position:absolute до определенного момента у него ширина по содержимому, а потом становится фиксированной и не расширяется до 100%. Из-за чего так происходит? Как сделать, чтобы по ширине увеличивался и не фиксировался?
  • Вопрос задан
  • 107 просмотров
Решения вопроса 1
Stalker_RED
@Stalker_RED
Минимальная ширина ограничена длиной самого длинного слова + паддинг.
Максимальная - 50%, так как left: 50% и тянется до 100%.

Как сделать, чтобы по ширине увеличивался и не фиксировался?

Можете подробнее объяснить, что вы вообще пытаетесь сделать?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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