Как подогнать список?

Question

[Extramezz]

Есть выпадающий список, грубо говоря, такой: jsfiddle.net/xdfq9d9v/1

Как подогнать ширину оранжевой части списка под самый широкий li? (И, собственно, сделать, чтобы текст в li не переносился).

Чтобы получилось примерно так:

Answer 1

[Александр Зачиналов]

Если список на абсолюте, то шириной родителя вы не сможете управлять на CSS, только JS - jsfiddle.net/xdfq9d9v/4

Answer 2

[Александр]

width: 100% для дочерних элементов контейнера и запрещаем переносы строк в с списке:

li {
    white-space: nowrap;
}

Comments

[Александр Зачиналов]

дочерние элементы, которые позиционированы абсолютно, на ширину родителя не влияют

Answer 3

[Vitaliy Orlov]

jsfiddle.net/xdfq9d9v/2

Comments

[Extramezz]

Не пойдет, так как
1) При скрытии он уменьшается
2) Список должен быть спозиционирован абсолютно, чтобы при развертывании высота div не менялась.

[Vitaliy Orlov]

1) тогда у тебя не должно быть свойства display:inline-block для div
2) мне кажется, у тебя не правильная логическая структура кода, тебе надо что-то типа

<div class="wrapper">
   <div class="header">Header</div>
   <div class="content">List</div>
</div>

причем wrapper надо делать с ограничением ширины, а header и content 100%. Подогнать блок header, под ширину скрытого content, без извращений и костылей на JS будет сложно.