Flex-flow: обтекание столбцов. Как установить ширину контейнера, равную содержимому?

У меня есть контейнер и несколько внутренних div.

.container {
 display: inline-flex;
 flex-flow: column wrap;
 max-height: 500px;
}
.element {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
}

Теперь у меня есть 3 гибких столбца.

Что я ожидал: Ширина контейнера равна сумме ширины столбцов (660px).

Что я получил: Ширина контейнера становится равной ширине первого столбца.

Ручка: http://codepen.io/korsun/pen/zGpQrZ

Почему? Когда я изменяю направление flex на row и max-height до max-width, все происходит так, как ожидалось. Есть ли способ сделать мою ширину контейнера равной ширине содержимого?

Ответы

Ответ 1

  • Контейнер .wrap установлен в встроенный блок. Вам нужно, чтобы контейнер ".container" был установлен в "block", а затем определенный с тем, чтобы содержать блоки в целом.

  • У вашего ".container" установлено значение " inline-flex", который затем делает то же самое, что и ".wrap", когда вы добавляете встроенный элемент в изображение. Установка этого параметра на " flex" должна устранить вашу проблему.

  • Ваши элементы внутри контейнера обычно должны иметь значение " flex: [число]" и содержащая ширина. Ток с "200" сдерживается и, к сожалению, не отвечает. Установка максимальной ширины 200 даст как желаемую ширину, так и ответный аспект, который вы можете контролировать с помощью медиа-запросов.

http://codepen.io/mmcshinsky/pen/bd927e31d2df2f9180a5b7fcf1df2740/

.wrap {
  display: block;
  max-width: 660px;
}
.container {
  display: flex;
  flex-flow: column wrap;
  max-height: 500px;
}

.element {
  max-width: 200px;
  height: 200px;
  margin: 10px;
  background: #000;
  flex: 1;
}