Когда элементы flexbox обертываются в режиме столбцов, контейнер не увеличивает свою ширину

Ответ 1

Эта проблема

Это похоже на фундаментальный недостаток гибкого макета.

Гибкий контейнер в направлении столбцов не будет расширяться для размещения дополнительных столбцов. (Это не проблема в flex-direction: row.)

Этот вопрос задавался много раз (см. Список ниже), без четких ответов в CSS.

Трудно связать это с ошибкой, потому что проблема возникает во всех основных браузерах. Но это поднимает вопрос:

Как это возможно, что во всех основных браузерах гибкий контейнер расширяется при переносе в направлении строки, а не в направлении столбца?

Можно подумать, что хотя бы один из них понял это правильно. Я могу только размышлять о причине. Возможно, это была технически сложная реализация, и она была отложена для этой итерации.

ОБНОВЛЕНИЕ: проблема, кажется, решена в Edge v16.

Иллюстрация проблемы

ОП создал полезную демонстрацию, иллюстрирующую проблему. Я копирую это здесь: http://jsfiddle.net/nwccdwLw/1/

Варианты обхода

Хакерские решения от сообщества Stack Overflow:

• "Кажется, эта проблема не может быть решена только с помощью CSS, поэтому я предлагаю вам решение JQuery".

• "Любопытно, что в большинстве браузеров неправильно реализованы гибкие контейнеры столбцов, но поддержка режимов записи достаточно хорошая. Поэтому вы можете использовать гибкий контейнер строк с вертикальным режимом записи".

Больше анализа

• Сообщение об ошибке хрома

• Марк Амери ответ

Другие сообщения, описывающие ту же проблему

• Ширина контейнера Flex Box не увеличивается
• Как я могу сделать отображение: гибкий контейнер расширяется горизонтально с его упакованным содержимым?
• Flex-flow: обтекание колонны. Как установить ширину контейнера, равную содержанию?
• Flexbox Flow-Flow колонки обертывают ошибки в хром?
• Как мне использовать "flex-flow: column wrap"?
• Контейнер Flex не раскрывается при переносе содержимого в столбец
• flex-flow: обтекание столбца в flex-боксе, вызывающее переполнение родительского контейнера
• HTML-контейнер flexbox не распространяется на завернутые дочерние элементы
• Контейнер Flexbox и переполненные Flex дети?
• Как я могу сделать контейнер для флексбокса, который растягивается, чтобы вместить завернутые предметы?
• Контейнер Flex, рассчитывающий один столбец при наличии нескольких столбцов
• Сделать контейнер на всю ширину с помощью flex
• Возможно ли изменение размера контейнера Flexbox?
• Flex-Wrap Inside Flex-Grow
• Flexbox растет, чтобы содержать
• Развернуть элемент flexbox до его содержимого?
• столбец flexbox растягивается по размеру содержимого
• fooobar.com/questions/23695/...
• flex-flow: перенос столбца не растягивает ширину родительского элемента
• Почему мой <ul> не расширяет ширину, чтобы покрыть все <li>?
• Как настроить ширину при переносе столбцов flexbox?
• Flexbox не увеличивает ширину родительского слоя?

Ответ 2

Опоздал на вечеринку, но все еще сталкивался с этой проблемой ГОДАМИ позже. Закончилось поиском решения с использованием сетки. На контейнере вы можете использовать

display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

У меня есть пример на CodePen, который переключается между проблемой flexbox и исправлением сетки: https://codepen.io/MandeeD/pen/JVLdLd

Ответ 3

Поскольку решения или правильного обходного пути пока не предлагалось, мне удалось получить требуемое поведение с немного другим подходом. Вместо того, чтобы разделять макет на 3 разных элемента, я добавляю все элементы в 1 блок и создаю разделение с несколькими дополнительными элементами.

Предлагаемое решение жестко запрограммировано, предполагая, что у нас есть 3 раздела, но может быть расширено до общего. Основная идея состоит в том, чтобы объяснить, как мы можем достичь этого макета.

1. Добавление всех элементов в 1 контейнерный блок, который использует flex для упаковки элементов
2. Первый элемент каждого "внутреннего контейнера" (я назову его разделом) будет иметь класс, который помогает нам выполнять некоторые манипуляции, которые создают разделение и стилизацию каждого раздела.
3. Используя :before для каждого первого элемента, мы можем найти заголовок каждого раздела.
4. Использование space создает разрыв между разделами
5. Так как space не покрывает всю высоту раздела, я также добавляю :after к разделам, поэтому позиционируем его с абсолютным положением и белым фоном.
6. Чтобы стилизовать цвет фона каждого раздела, я добавляю еще один div внутри первого элемента каждого раздела. Я также буду с абсолютным положением и буду иметь z-index: -1.
7. Чтобы получить правильную ширину каждого фона, я использую JS, устанавливаю правильную ширину, а также добавляю слушателя для изменения размера.

function calcWidth() {
  var size = $(document).width();
  var end = $(".end").offset().left;

  var todoWidth = $(".doing-first").offset().left;
  $(".bg-todo").css("width", todoWidth);

  var doingWidth = $(".done-first").offset().left - todoWidth;
  $(".bg-doing").css("width", doingWidth);

  var doneWidth = $(".end").offset().left - $(".done-first").offset().left;
  $(".bg-done").css("width", doneWidth + 20);

}

calcWidth();

$(window).resize(function() {
  calcWidth();
});

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 120px;
  align-content: flex-start;
  padding-top: 30px;
  overflow-x: auto;
  overflow-y: hidden;
}

.item {
  width: 200px;
  background-color: #e5e5e5;
  border-radius: 5px;
  height: 20px;
  margin: 5px;
  position: relative;
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  padding: 5px;
}

.space {
  height: 150px;
  width: 10px;
  background-color: #fff;
  margin: 10px;
}

.todo-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "To Do (2)";
  font-weight: bold;
}

.doing-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Doing (5)";
  font-weight: bold;
}

.doing-first:after,
.done-first:after {
  position: absolute;
  top: -35px;
  left: -25px;
  width: 10px;
  height: 180px;
  z-index: 10;
  background-color: #fff;
  content: "";
}

.done-first:before {
  position: absolute;
  top: -30px;
  height: 30px;
  content: "Done (3)";
  font-weight: bold;
}

.bg-todo {
  position: absolute;
  background-color: #FFEFD3;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -10px;
  z-index: -1;
}

.bg-doing {
  position: absolute;
  background-color: #EFDCFF;
  width: 100vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.bg-done {
  position: absolute;
  background-color: #DCFFEE;
  width: 10vw;
  height: 150px;
  top: -30px;
  left: -15px;
  z-index: -1;
}

.end {
  height: 150px;
  width: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="item todo-first">
    <div class="bg-todo"></div>
    Drink coffee
  </div>
  <div class="item">Go to work</div>

  <div class="space"></div>

  <div class="item doing-first">
    <div class="bg-doing"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>

  <div class="space"></div>

  <div class="item done-first">
    <div class="bg-done"></div>
    1
  </div>
  <div class="item">2</div>
  <div class="item">3</div>

  <div class="end"></div>

</div>

Ответ 4

Возможное решение JS..

var ul = $("ul.ul-to-fix");

if(ul.find("li").length>{max_possible_rows)){
    if(!ul.hasClass("width-calculated")){
        ul.width(ul.find("li").eq(0).width()*ul.css("columns"));
        ul.addClass("width-calculated");
     }
}