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盒模型。