当列的宽度不适合其容器时，如何垂直包裹列？

Question

我在将flexbox包装到列中时遇到问题。容器不适合内容宽度，如下面的代码片段所示。

如果您将flex-flow和.wrapper中的.container和flex-flow: row wrap都替换为.wrapper { display: flex; flex-flow: column wrap; max-height: 500px; max-width: 500px; overflow: scroll; } .container { display: flex; flex-flow: column wrap; align-content: flex-start; background-color: red; margin: 5px; } .product { margin: 3px; min-width: 100px; min-height: 100px; background-color: #ccc; text-align: center; font-weight: bold; line-height: 100px; }，则此高度适用于其子项的内容高度，但是问题在于列然后水平流动并出现在彼此下方，而不是垂直流动并彼此并排。

我希望得到以下结果：

<div class='wrapper'>
  <div class='container'>
    <div class="product">0.1</div>
    <div class="product">0.2</div>
    <div class="product">0.3</div>
    <div class="product">0.4</div>
    <div class="product">0.5</div>
    <div class="product">0.6</div>
    <div class="product">0.7</div>
    <div class="product">0.8</div>
  </div>
  <div class='container'>
    <div class="product">1.1</div>
    <div class="product">1.2</div>
    <div class="product">1.3</div>
    <div class="product">1.4</div>
    <div class="product">1.5</div>
    <div class="product">1.6</div>
    <div class="product">1.7</div>
    <div class="product">1.8</div>
  </div>
  <div class='container'>
    <div class="product">2.1</div>
    <div class="product">2.2</div>
    <div class="product">2.3</div>
    <div class="product">2.4</div>
    <div class="product">2.5</div>
    <div class="product">2.6</div>
    <div class="product">2.7</div>
    <div class="product">2.8</div>
  </div>
  <div class='container'>
    <div class="product">3.1</div>
    <div class="product">3.2</div>
    <div class="product">3.3</div>
    <div class="product">3.4</div>
    <div class="product">3.5</div>
    <div class="product">3.6</div>
    <div class="product">3.7</div>
    <div class="product">3.8</div>
  </div>
</div>

request.onload = function () {
            if (request.readyState === request.DONE) {
                if (request.status === 200) {
                    console.log(request.response);
                }
            }
        };

Answer 1

问题是.container没有定义width，所以.wrapper的确具有最大的with，它是一个Flexbox，所有子项（.container）会自动适合他们的父母，这就是问题所在。

您可以通过在容器类中设置with来解决此问题。

类似这样的内容：width: 212px;