Как динамически растягивать родительский див?

Question

[Михаил]

Столкнулся с такой проблемой. Имеется див в котором лежит некий контент в 2 колонки строками. Которые могут быть различной ширины, надо сделать так, что бы родительский див растягивался от минимальной ширины до 100% в зависимости от содержимого. Ниже примерный код.

<div class="parent">
  <div class="col-1">
    <div class="row">
      Тут что-то есть
    </div>
    <div class="row">
     И тут
    </div>
  </div>
  <div class="col-2">
   Тут тоже что и в col-1
  </div>
</div>

Answer 1

[Евгений Петров]

1. Контейнер
display:table (inline-table) + max-width:100% + table-layout:fixed (если нужно уравнять ширину колонок)

2. Контейнер
display:inline-block + max-width:100% + font-size:0 + white-space:nowrap (чтобы колонки не прыгнули друг под друга без ширины)
Колонки
display:inline-block + vertical-align:top + font-size:1rem + width:50% (если нужно уравнять ширину колонок) + white-space:normal (если было установлено nowrap)
Можно и float при желании с clearence у потока или overflow у контейнера

3. Контейнер
float + max-width:100%
Колонки
float + width:50% (или другие цифры, не превышающие в сумме 100%)
Точно так же можно и display:inline-block с обнулением и возвратом размера шрифта

Comments

[Михаил]

Спасибо. Подошел лучше всего первый вариант. Второй не заработал. Вот только table-layout почему-то ни на что не влияет. Ну и колонкам я задал table-cell

[Евгений Петров]

@FFxSquall table-layout работает только для указания ширины. Либо нужно указывать width напрямую, что нам не нужно в этой задаче, либо ждать, когда таблица растянется на полную.

А с width:auto расчёт ширины столбцов с помощью table-layout задать нельзя, увы... Что-то я не подумал про это. А про table-cell вы верно подметили — я забыл написать. Ну вы и сами с усами:)

Answer 2

[Юрий Лобанов]

Например вот так:
codepen.io/iiil/pen/qcBbx