css - 没有全宽的 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;
}

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