Flexbox не обертывается после 12 позиций столбца

Question

Я не могу получить flexbox .col, чтобы обернуть после 12 предметов.

Вот мой Flexbox СКС:

.container{ 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
    width: 1170px; 
    margin-right: auto; 
    margin-left: auto; 
    box-sizing: content-box; 
} 

.col{ 
    max-width: 8.333333%; 
    flex-basis: 8.33333333%; 
    flex: 1 auto; 
    margin: 5px; 
    box-sizing: border-box; 
    min-height: 1px; 
    padding-right: 0.5rem; 
    padding-left: 0.5rem; 
} 

Вот скрипка, которая поможет показать образец лучше: https://jsfiddle.net/2Lrwcvpg/

Answer 1

Используйте «максимальную ширину» Для контейнера и теперь он работает.

.container {

display: flex;  
flex-wrap: wrap;  
max-width: 1170px; 
margin-right: auto; 
margin-left: auto; 
box-sizing: content-box; 

}

Answer 2

Если он должен завернуть после 12 пунктов

сделать эти изменения. проверьте следующий фрагмент

.container{ 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    max-width: 1170px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    box-sizing: content-box; 
 
} 
 

 
.col{ 
 
    max-width: 6.2%; 
 
    flex-basis: 8.33%; 
 
    flex: 1 auto; 
 
    margin: 5px; 
 
    box-sizing: border-box; 
 
    min-height: 1px; 
 
    padding-right: 0.5rem; 
 
    padding-left: 0.5rem; 
 
}

<style media="screen"> 
 
    .col, .col-2{ 
 
     background-color: orange; 
 
    } 
 
</style> 
 
<div class="container"> 
 
    <div class="col"> 
 
     test 
 
    </div> 
 
    <div class="col"> 
 
     test 
 
    </div> 
 
    <div class="col"> 
 
     test 
 
    </div> 
 
    <div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div> 
 
    <div class="col"> 
 
     test 
 
    </div> 
 

 

 
    <div class="col"> 
 
     test 
 
    </div><div class="col"> 
 
     test 
 
    </div> 
 
</div>

Надеется, что это помогает