CSS flex width issue

Question

我有一个容器，我想放置一些项目，容器内的项目的宽度有一个小问题。他们都溢出了一点点。

HTML：

<div class="body_collections"> 
    <div class="item_holder"> 
    <div class="item_image"> 
    </div> 
    <div class="item_text_holder"> 
     Line 1 
    </div> 
    <div class="item_checkbox"> 
    </div> 
    </div> 
    <div class="item_holder"> 
    <div class="item_image"> 
    </div> 
    <div class="item_text_holder"> 
     Line 2 
    </div> 
    <div class="item_checkbox"> 
    </div> 
    </div> 
</div> 

CSS：

.body_collections { 
    width:100%; 
    height: 250px; 
    background-color:#ededed; 
    overflow:hidden; 
    overflow-y: scroll; 
    padding:0 10px; 
} 
.item_holder { 
    display:flex; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-flow: row nowrap; 
    justify-content:space-between; 
    align-items:center; 
    background-color:#FFF; 
    width:100%; 
    height:50px; 
    margin:10px 0; 
} 
.item_image { 
    width:50px; 
    height:50px; 
    -webkit-border-radius:50%; 
    -moz-border-radius:50%; 
    border-radius:50%; 
    background-color:#CCC; 
} 
.item_text_holder { 
    width:auto; 
    height:50px; 
    background-color:#119911; 
} 
.item_checkbox { 
    width:75px; 
    height:50px; 
    background-color:#aa1111; 
} 

这里是working example

所有的项目都是100％的宽度，但与10px的的填充（右&左），但应用这种填充会导致溢出。

我该如何避免这种情况？

Answer 1

添加下面的CSS：

.body_collections { 
    box-sizing: border-box; 
} 

默认值为content-box。

从Documentation：

盒上浆属性用于改变用于计算元件的宽度和高度的默认CSS盒模型。