Flexbox容器没有全宽

Question

我现在正忙着使用flexbox。我想创建这种结构：

这基本上是具有子元素的元素列表。每个元素在给定时间可以具有更多或更少的项目。

这就是我的尝试：

<div class="list">
  <div class="element">
    <h3 class="element-title">Title 1</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 2</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 3</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
  <div class="element">
    <h3 class="element-title">Title 4</h3>
    <div class="element-items">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
    </div>
  </div>
</div>

标记非常基础。

这是CSS（Sass）：

.list {
  display: flex;
  flex-wrap: wrap;
}

.element-items {
  display: flex;
}

.element {
  & + & {
    margin-left: 100px;
  }
}

.item {
  background: #fff;
  border-radius: 6px;
  flex-basis: 140px;
  flex-shrink: 0;
  color: #ccc;
  font-size: 11px;

  & + & {
    margin-left: 30px;
  }
}

但是，element-items没有得到应该给出子元素宽度的宽度，并且它以一种糟糕的方式重叠。

代码位于Codepen上，可以使用：http://codepen.io/Belelros/pen/domoJm?editors=110

任何人都可以提出可能出错的建议吗？

Answer 1

If you set width, it works.

.item {
  background: #fff;
  border-radius: 6px;
  flex-basis: 140px;
  width: 140px;
  flex-shrink: 0;
  color: #ccc;
  font-size: 11px;
  height: 140px;
}

另一种选择是在flex-basis上设置.element。