Как использовать "flex-flow: wrap wrap"?

Краткая версия

При использовании flex-flow: column wrap и display: inline-flex он не сжимается, как inline-block:

(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('flex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();
(function() {
  var ascending = true;
  setInterval(function() {
    var parent = document.getElementById('failex');
    if (ascending) {
      var child = document.createElement('p');
      child.innerHTML = "foo";
      parent.appendChild(child);
    } else {
      parent.removeChild(parent.children[0]);
    }
    if (parent.children.length <= 1) ascending = true;
    if (parent.children.length >= 40) ascending = false;
  }, 20);
})();

#flexdesc {position: absolute; top: 25px;}
#flex {
  top: 50px;
  position: absolute;
  display: inline-flex;
  flex-flow: row wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 100%;
  max-width: 180px;
  align-content: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
  transform-origin: top left;
}

#flex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
  transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
  top: 300px;
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  outline: 1px solid black;
  padding: 3px;
  max-height: 200px;
  align-content: flex-start;
  transform-origin: top left;
}

#failex > p {
  margin: 0;
  outline: 1px solid black;
  height: 30px;
  width: 30px;
  align-self: flex-start;
}

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="flexdesc">What I expect it to do</div>
  <div id="flex">
    <p>foo</p>
    
    <!-- add extra "<p>foo</p>" here. -->
  </div>
  <div id="failexdesc">What it does</div>
  <div id="failex">
    <p>foo</p>
  </div>
</body>
</html>

Ответ 1

Это была ошибка. Здесь ссылки на трекер:

https://bugs.chromium.org/p/chromium/issues/detail?id=247963 https://bugs.chromium.org/p/chromium/issues/detail?id=507397

Как хотел OP:

Мне нужно, чтобы flexbox сокращал свои столбцы. Зачем? Я пытаюсь использовать flexbox на горизонтально прокручиваемом веб-сайте. Конечно, я мог просто позволить детям переполняться, но это переполнение имеет тенденцию... ломать вещи. Поэтому я решил, что мне нужен гибкий поток: обертка колонки с дисплеем: inline-flex. Я надеялся на эффект "сверху вниз, слева направо", где у родителя нет пустого пространства.

Мы можем просто достичь этого с помощью flex-flow: column wrap;, align-content: flex-start; и обертки с фиксированной высотой вместе.

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

Обновлен скрипт: http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

Ответ 2

Возможно, это будет поздно, но я думаю, что "wrap-wrap" не полностью поддерживается Firefox. Как вы сказали, вам понадобится это в Chrome, в этом случае вы увидите, что сделал Крис Койер: добавьте префикс webkit → http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Надежда не опаздывает:/