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（萨斯）：

.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。