flexbox和容器宽度

Question

所以我有一个奇怪的问题， 我有这个HTML：

<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

然后我有这个CSS

html,
body {
    padding: 0;
    margin: 0;
}

.container {  
    height: 100vh;
    display: flex;
}

.row {
    display: flex;
    padding: 50px 20px 20px;
}

.flex-column {
    background-color: pink;

    width: auto;
    margin-right: 100px;
    width: 280px;

    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px 0 0 20px;
}

.box {
    background-color: blue;
    width: 120px;
    height: 120px;
    margin: 0 20px 20px 0;
}

如果我这样使用它，内容都会尝试适合行宽度，这不是我想要的。我希望该行能够扩展（并显示一个滚动条），具体取决于其中的内容。

现在，我注意到，如果我将 flex-column 类添加到该行，它会修复它（排序）。您可以看到背景颜色，它没有正确地执行所有操作，但副作用是它实际上按照我想要的方式工作。

我的问题是如何才能让它围绕内容包裹行但仍然有滚动条？

这是代码库，用于显示我目前拥有的内容。

http://codepen.io/r3plica/pen/waPoQo

如果从行中删除 flex-column 类，您将看到问题。

Answer 1

你必须使用flexbox吗？没有它你就可以做到。我发布了一个flex和一个非flex的例子。如果要使用flex，则必须确保在flex元素周围有overflow:scroll的块容器元素。此外，您的容器内的主要flex元素需要设置为float，以便它可以正确地水平扩展以包含您的inline-block子元素。

非Flex示例：

＆＃13;

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
}

.row {
    background-color: red !important;
    display: block;
    padding: 50px 20px 20px;
    overflow:scroll;
    white-space:nowrap;
}

.flex-column {
    background-color: pink;
    display: inline-block;
    margin-right: 100px;
    padding: 20px 0 0 20px;
    width: 280px;
    vertical-align:top;
}

.box {
    background-color: blue;
    display: block;
    float: left;
    height: 120px;
    margin: 0 20px 20px 0;
    width: 120px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Flex示例：

＆＃13;

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
}

.container{
  display:block;
  overflow:auto;
}

.row {
    background-color: red !important;
    display: flex;
    padding: 50px 20px 20px;
    overflow:scroll;
    white-space:nowrap;
    float:left;
}

.flex-column {
    background-color: pink;
    display: inline-block;
    margin-right: 100px;
    padding: 20px 0 0 20px;
    width: 280px;
    vertical-align:top;
}

.box {
    background-color: blue;
    display: block;
    float: left;
    height: 120px;
    margin: 0 20px 20px 0;
    width: 120px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
      <div class="box">7</div>
      <div class="box">8</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <div class="flex-column">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;