Как задать ширину родителю, если дочерний элемент абсолютный?

Question

[Кирилл]

Не получается сделать так, чтобы блок .wrapper принимал ширину элемента .child.

Есть такая вёрстка:

<div class="parent">
    <div class="wrapper">
        <div class="child">
            <span>Привет!</span>
         </div>
    </div>
</div>

И такие стили:

.parent {
    position: relative;
    height: 200px;
    background: rgba(34,34,234,.3)
}

.wrapper {
    position: relative;
    display: inline-block;
    height: 100%;
    background: rgba(34,234,234,.3)
}

.child {
    position: absolute;
    top: 50%;
    display: block;
    transform: translateY(-50%);
    background: rgba(134,234,134,.6)
}

Как видите, решил центрировать .child внутри .parent по вертикали. По вертикали всё центруется. Но как сделать, чтобы блок .wrapper имел такую же ширину, как и .child?

Вот код на кодпене.

.wrapper имеет display:inline-block. Это важно. Менять нельзя.

Comments

[iBird Rose]

центрируй по вертикали другими способами. к примеру flex

[Кирилл]

iBird Rose: Вроде бы flex не кроссбраузерный. Он точно будет работать в старых браузерах?

[iBird Rose]

Кирилл: caniuse.com/#search=flex
во всяком случае это поможет вам без костылей получить то что вы хотите

[Сергей Горячев]

Код полнейшее извращение.
flex работает от 10 версии ИЕ, уже пора забить хрен на костыли и переходить.
ИЕ 9м уже ни один здравый человек не пользуется.
А если и есть 0.001% доли рынка, то и хрен с ним.

[Кирилл]

Сергей Горячев: предложи здоровый код)

[Сергей Горячев]

Кирилл: Неее, мне влом) Тебе уже сказали, делай на флексе) Это и будет здоровый код) Там всего то 6 строк кода) flexbox.help тебе в помощь)

[Кирилл]

Сергей Горячев: ну спасибо)

Answer 1

[Ankhena]

Флексами
https://codepen.io/anon/pen/EvNeRP
Может, у вас картина сложнее, но на данный момент перебор оберток.

Comments

[Кирилл]

Нет, не перебор. Действительно так надо. Когда вырвано из контекста, то выглядит странно. Не спорю.

[Ankhena]

Кирилл: я их и не убирала.
В стилях оставила закомментированными свойства, которые надо убрать, нужные дописала.
Префиксы, думаю, сами расставите.

[Ankhena]

Кирилл: Прочитала про inline-block, так есть inline-flex https://codepen.io/anon/pen/QMGzgZ не устроит?

Answer 2

[Stalker_RED]

Без костылей никак. Лучше пересмотреть свой подход и переверстать.
Элемент с position:absolute выпадает из потока (flow) и не занимает места в родителе.

Костыль: при помощи js получить width у абсолютного элемента и установить его в parent.

Comments

[Кирилл]

Надо без JavaScript. Какие есть ещё способы центрирования по вертикали помимо моего способа?

[Stalker_RED]

Кирилл: А зачем вообще этот пустой wrapper? Что вы от него хотите?

Answer 3

[Exploding]

По-моему вот оно!
Как в старом анекдоте: " И сказал Иисус мальчику: -Брось костыли и иди..."

.parent {
    position: relative;
    height: 200px;
    background: #008000;
}

.wrapper {
    position: relative;
    display: inline-block;
	text-align:center;
    height: auto;
    left: 50%;
    top: 50%;
	max-width: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: #00f;
}

.child {
    display: block;
    background: rgba(255, 255, 255, 0.44);
	width:auto;
}

"... и мальчик бросил и пошел...
- А чем болел?
- Насморком.
- А костыли зачем?
- Дедушке нес..."

Comments

[Кирилл]

Надо без таких костылей, как calc().

[Exploding]

Легко

.parent {
        position: relative;
    height: 200px;
    background: #008000;
}

.wrapper {
position: relative;
    display: inline-block;
    height: auto;
    left: 50%;
    top: 50%;
    margin: -10px 0 0 -25px;
    background: #00f;
}

.child {
    display: block;
    background: rgba(255, 255, 255, 0.44);
}

[Exploding]

Кирилл: И че это вдруг calc - костыль?))) Ословый экспрешн - да, а калк очень даже отлично работает везде.

[Кирилл]

Exploding: Ты пишешь во .wrapper свойство "margin: -10px 0 0 -25px;". Насколько помню, это для случаев, если ширина и высота .child известна. А у меня неизвестна.

[Александр Шаповал]

Кирилл: почему calc() костыль? Мне кажется у вас не верное представление о костылях.

[Exploding]

Кирилл: А если неизвестна высота, и нельзя флекс использовать, и inline-block оставить враперу, то кроме как display: table-cell для childa который сделать прозрачным и ШхВ = 100%... я больше вроде не знаю никаких других способов.

[Exploding]

Кирилл: Все. Готово. Обновил в решении код!

Answer 4

[Юрий Истомин]

задать для .wrapper margin: 0; padding: 0.

Comments

[Кирилл]

не помогло...