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

Question

[Eugene Chefranov]

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

<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;
}

Код на codepen: https://codepen.io/chefranov/pen/LOePdd
Почему блок с position:absolute до определенного момента у него ширина по содержимому, а потом становится фиксированной и не расширяется до 100%. Из-за чего так происходит? Как сделать, чтобы по ширине увеличивался и не фиксировался?

Answer 1

[Stalker_RED]

Минимальная ширина ограничена длиной самого длинного слова + паддинг.
Максимальная - 50%, так как left: 50% и тянется до 100%.

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

Можете подробнее объяснить, что вы вообще пытаетесь сделать?