Как сделать абсолютно позиционированному элементу авто ширину по его содержимому?

Question

[Дмитрий Калинин]

Добрый день!
Есть дропдаун меню которое абсолютно позиционировано, внутрь добавляются элементы. Хочется чтоб родительский контейнер принимал ширину в зав-ти от содержимого, до определенной max-width (планируется по 3 в ряд, дальше вниз).
К примеру сделать это с не абсолютно позиционированным блоком труда не составляет:

.parent{
display: inline-block;
max-width: 300px;
}
.child{
display: block;
float: left;
width: 100px
}

А вот как быть в моей ситуации?)

Comments

[FeST1VaL]

ну очень тупое решение, но я хз пока что как можно подругому) и мне лень)

можно через JS считать ширину при загрузке страницы

[Дмитрий Калинин]

Артем Будин, это понятно, но этого не хочется)

Answer 1

[Ankhena]

Если прекратить использовать флоаты для того, для чего они не предназначены, то всё ведь прекрасно будет работать.
https://jsfiddle.net/bxefyc38/
Отступы так, для видимости, в ширину и другие параметры флексов можете сами играть.

P.S. С флоатами, кстати, тоже будет работать, только высота у детей должна быть одинаковой для нормального вида.
Поэтому не ясно, что у вас не получалось.
Но так (флоатами) делать не надо.

P.P.S. Абсолютно-позиционированные элементы не бывают инлайн-блоками.

Comments

[Дмитрий Калинин]

спасибо, я понял в чем дело. а дело вот в такой структуре

<div id="1" style="position: absolute">
          <div id="2">
                            <button class="btn-default">Load</button>
                                <ul style="position: absolute">
                                    <li></li>
                                    <li></li>
                                </ul>
          </div>
</div>

у первого дива была ширина по контенту (он тоже абсолютный), ну соотв. у второго дива как у его родителя (там внутри тогда одна кнопка получается), ну и понятно что ширины для UL просто нет от родителя.
т.е. тут решения задать первому блоку ширину. не заметил я этого(.

[Дмитрий Калинин]

"P.P.S. Абсолютно-позиционированные элементы не бывают инлайн-блоками. "
там же пример когда не позиционированный элемент, я ж указал.

[Ankhena]

Дмитрий Калинин, по тому куску кода, который в вопросе, предположить можно что угодно.
Делайте песочницы с кодом и воспроизводимой проблемой, разночтений будет меньше.

[Дмитрий Калинин]

Ankhena, не очень пойму как сохранить это поведение если в li есть img, с max-width:100%.
Есть вариант сохранить его в строке с остальными элементами ряда?

[Ankhena]

Дмитрий Калинин, либо вы зададите li ширину или min/max ширину или комбинацию basis, shrink, grow либо он займет всю строку.

Или начать с img. Задать размер ему.

Вариантов вообще полно.

Можно сменить флекс на грид.

[Дмитрий Калинин]

Ankhena, ладно, спасибо, вообщем не получилось у меня без флексов обойтись. на флексах вроде реально работает. а вот с флоатами или инлайн-блоками, у меня не получается реализовать. как вы правильно сказали абсолютно позиционированный блок не будет инлайном, а если делать его обычным блоком то не получается сделать с li в % (чтоб например треть занимал от любого размера), т.к. опять таки контейнер может быть адаптивным по макс. ширине + хочется нарашивание по мере добавления контента. либо если получается, то родительский блок не скрывается и от его ширины тогда все работает.
ну а с флексами трабл потмоу что дроп даун бутстраповский 3й версии и там он не флексовский, т.е. либо свой делать либо костыли.
лдано, не буду грузить, разберемся)

[Ankhena]

1. Да если ширина зависит детей, а дети от ширины родителя , выйдет ерунда.
2. 3 бутстрап не мешает использовать свои стили и не обязывает всюду использовать только его.
3. Флоаты вообще не для этого

Answer 2

[Антон Шаманов]

что-то вроде width: auto; min-width: 100px; max-width: 300px;

Comments

[Дмитрий Калинин]

было бы все так просто не писал бы

[Антон Шаманов]

было у Вас поконкретнее все расписано, можно было бы и поточнее ответить.
"абсолютно позиционированному элементу" не забыли position приписать?

[Дмитрий Калинин]

Антон Шаманов, странные вопросы у вас. нет не забыл)) вы бы читали повнимательнее, тогда бы и конкретики было бы больше

[Антон Шаманов]

Дмитрий Калинин, ага, оно и видно https://jsfiddle.net/bxefyc38/

.block {
  position: absolute;

[Дмитрий Калинин]

Антон Шаманов, я специально для вас двоеточние поставил в тесте вопроса, чтоб понятно стало где и что