问题
这看起来像是flex布局中的一个基本缺陷。
列方向的Flex容器不会扩展以容纳其他列。（这在flex-direction: row中不是问题。）
这个问题已经被问了很多次（见下面的列表），在CSS中没有明确的答案。
很难将其视为bug，因为该问题在所有主流浏览器中都会发生。但它确实提出了一个问题：
为什么所有主流浏览器都能让flex容器在换行时按行方向扩展，而不是按列方向扩展？
你会认为他们中至少有一个会做对。我只能推测原因。也许这是一个技术上很困难的实现，因此在这次迭代中被搁置了。

**更新：**此问题似乎在Edge v16中得到解决。

问题说明

OP创建了一个有用的演示来说明这个问题。我在这里复制：http://jsfiddle.net/nwccdwLw/1/

解决方案

来自Stack Overflow社区的Hacky解决方案：

• "It seems this issue cannot be solved only with CSS, so I propose you a JQuery solution."
• "It's curious that most browsers haven't implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode."

更多分析

• Chromium Bug Report
• Mark Amery's answer

其他描述相同问题的帖子

• Flex box container width doesn't grow
• How can I make a display:flex container expand horizontally with its wrapped contents?
• Flex-flow: column wrap. How to set container's width equal to content?
• Flexbox flex-flow column wrap bugs in chrome?
• How do I use "flex-flow: column wrap"?
• Flex container doesn't expand when contents wrap in a column
• flex-flow: column wrap, in a flex box causing overflow of parent container
• Html flexbox container does not expand over wrapped children
• Flexbox container and overflowing flex children?
• How can I make a flexbox container that stretches to fit wrapped items?
• Flex container calculating one column, when there are multiple columns
• Make container full width with flex
• Flexbox container resize possible?
• Flex-Wrap Inside Flex-Grow
• Flexbox grow to contain
• Expand flexbox element to its contents?
• flexbox column stretch to fit content
• https://stackoverflow.com/q/48406237/3597276
• flex-flow: column wrap doesn't stretch the parent element's width
• Why doesn't my expand width to cover all the ?
• https://stackoverflow.com/q/55709208/3597276
• Flexbox wrap not increasing the width of parent?
• Absolute Flex container not changing to the correct width with defined max-height
• Parent inline-block div is narrower than the child div with flex-wrap

迟到了，但几年后仍然遇到了这个问题。最后，我找到了一个使用网格的解决方案。在容器上你可以使用

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

我在CodePen上有一个例子，可以在flexbox问题和网格修复之间切换：https://codepen.io/MandeeD/pen/JVLdLd

纯CSS解决方案

在这个问题被提出近6年后，这个flexbox bug * 仍然存在，所以这里有一个仅限CSS的flex-direction: column解决方案，供其他人使用：

body {
  background-color: grey;
}

button {
  background-color: white;
  border: none;
  border-radius: 4px;
  width: 80px;
  height: 40px;
  margin: 4px;
}

/* WORKAROUND FOR flex-direction: column WITH WRAP IS BELOW */
.wrapped-columns {
  flex-direction: row;
  flex-wrap: wrap;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

/* Ensures content is rendered correctly in Firefox */
.wrapped-columns * {
    writing-mode: horizontal-tb;
}

<div class="wrapped-columns">
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
  <button>Button 6</button>
  <button>Button 7</button>
  <button>Button 8</button>
  <button>Button 9</button>
  <button>Button 10</button>
  <button>Button 11</button>
  <button>Button 12</button>
  <button>Button 13</button>
  <button>Button 14</button>
</div>

此解决方法给出的结果与flex-direction: column相同，并且适用于flex-wrap: wrap和wrap-reverse。

我刚刚在这里找到了一个非常棒的纯CSS解决方案。
https://jsfiddle.net/gcob492x/3/
技巧：在列表div中设置writing-mode: vertical-lr，然后在列表项中设置writing-mode: horizontal-tb。我不得不调整JSFiddle中的样式（删除了许多对齐样式，这对于解决方案来说是不必要的）。
注意：评论说它只适用于基于Chromium的浏览器，而不是Firefox。我只在Chrome上测试过。有可能有一种方法可以修改它，使其在其他浏览器中工作，或者有更新说，浏览器，使这一工作。
Big Shoutout对此评论：当flexbox项以列模式换行时，容器不会增加其宽度。通过挖掘这个问题线索，我找到了https://bugs.chromium.org/p/chromium/issues/detail?id=507397#c39，这让我找到了这个JSFiddle。

不幸的是，许多主要的浏览器在多年后都遭受了这个bug的困扰。考虑一个Javascript解决方案。每当浏览器窗口调整大小或向元素添加内容时，执行此代码以使其调整大小为适当的宽度。你可以在你的框架中定义一个指令来为你做这件事。

element.style.flexBasis = "auto";
    element.style.flexBasis = `${element.scrollWidth}px`;

由于还没有建议解决方案或适当的变通方法，我设法用一种稍微不同的方法获得了所请求的行为。我没有把布局分成3个不同的div，而是把所有的项目都添加到1个div中，然后在中间再加上一些div。
建议的解决方案是硬编码的，假设我们有3个部分，但可以扩展到一个通用的。主要思想是解释我们如何实现这种布局。
1.将所有项添加到1个容器div中，该容器div使用flex Package 项
1.每个“内部容器”的第一项（我称之为节）将有一个类，它帮助我们进行一些操作，创建每个节的分隔和样式。
1.在每个第一项上使用:before，我们可以找到每个部分的标题。
1.使用space可在各部分之间创建差距
1.由于space不会覆盖整个部分的高度，我还将:after添加到部分中，以便使用绝对位置和白色背景来定位它。
1.为了设置每个部分的背景颜色，我在每个部分的第一个项目中添加了另一个div。我将位置与绝对以及将有z-index: -1。
1.为了获得每个背景的正确宽度，我使用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>

我用这种方式解决了我的问题，我希望它能帮助其他在这个问题上绊倒的人：

_ensureWidth(parentElement) {
let totalRealWidth = 0;
let parentElementBoundingRect  = parentElement.getBoundingClientRect()
let lowestLeft = parentElementBoundingRect.x;
let highestRight = parentElementBoundingRect.width;
for (let i = 0; i < parentElement.children.length; i++) {
  let { x, width } = parentElement.children[i].getBoundingClientRect();
  if (x < lowestLeft) {
    lowestLeft = x;
  }
  if (x + width > highestRight) {
    highestRight = x + width;
  }
}
totalRealWidth = highestRight - lowestLeft;
parentElement.style.width = `${totalRealWidth}px`;

}

解决方法：
使用javascript在元素加载到屏幕上之后手动设置 Package 器的宽度并不难。宽度将始终是最后一个子元素的右手点。
在react中，我让它根据添加到flex Package 器的任何子元素的布局变化进行更新，但这可以在您向 Package 器添加或删除子元素的任何时候调用。

let r = refWrapper.current.lastElementChild.getBoundingClientRect()
refWrapper.current.style.width = (r.x+r.width )+'px'

”
其中refWrapper是您的flex元素

可能的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");
     }
}