flex-flow：column wrap with display：flex类似。它向下流动，直到它不再流下(max-width？)，然后启动一个新列。当然，由于父代显示：flex，它是一个块级元素，因此由于align-content默认为拉伸事实，所以列将会中途。我可以轻松地改变它，以使flex-start使新列与之前相邻。
…但容器仍然太宽。它仍然是一个块，并填充它的父母的宽度。
我需要flexBox来缩小它的列。为什么？我试图在水平滚动的网站中使用flexBox。当然，我可以让孩子们流连忘返，但是这种溢出往往会让事情发生。
所以我想我需要flex-flow：列换行与显示：inline-flex。我希望有一个“从上到下，从左到右”的效果，父母没有空的空间。
…然后this发生了。在chrome中，父宽度等于子项的宽度之和，否则wrap为正常。在firefox中，父级是全宽的，只是增长更高以容纳元素(我不认为firefox支持包装)。在IE11中，宽度是正确的，但是孩子们刚刚溢出(甚至身体)。
我很困惑。
我在这里做错了什么？我知道flexBox是一个更新的功能，但我不知道这是多少这是我的错误与浏览器。
通过他们的方式，我正在铬测试。一个只有铬的解决方案是我的罚款。 (但优雅的全能解决方案总是很好！)
这是the code for the demo I linked to，万一jsbin下了：
var ascending = true;
setInterval(function() {
var parent = document.getElementById('flex');
if (ascending) {
var child = document.createElement('p');
child.innerHTML = "f";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 30) ascending = false;
},200);
#flex {
display: inline-flex;
flex-flow: column wrap;
outline: 1px solid black;
padding: 3px;
max-height: 100%;
align-content: flex-start;
}
p {
margin: 0;
outline: 1px solid black;
width: 10px;
}
body {
height: 150px;
width: 300px;
outline: 1px dashed black
}
<!DOCTYPE html> <html> <head> <Meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div id="flex"> <p>f</p> <!-- add extra "<p>foo</p>" here. --> </div> </body> </html>
解决方法
https://bugs.chromium.org/p/chromium/issues/detail?id=247963
https://bugs.chromium.org/p/chromium/issues/detail?id=507397
正如OP所想：
I need the flexBox to shrink-to-fit its columns. Why? I’m trying to use flexBox in a horizontally scrolling website. Granted,I could just let the children overflow,but that overflowing tends to… break things. So I figured I needed flex-flow: column wrap with display: inline-flex. I was hoping for a “top to bottom,left to right” effect,where the parent has no empty space.
我们可以简单地通过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;
}
