Добавление div-ов только по горизонтале
 

Есть один большой див, в котором помещаються 4 маленьких какраз впритык. У большого дива стоит overflow-x: scroll;
Когда добавляю 5 маленький див, то он почемуто идет вниз и появляеться вертикальная полоса прокрутки, хотя ее не должно быть по сути. Как сделать так, чтобы 5 див добавлялся не вниз а по горизонтали?

<div id="bigDiv">
        <div class="smallDiv"></div>
        <div class="smallDiv"></div>
        <div class="smallDiv"></div>
        <div class="smallDiv"></div>
        <div class="smallDiv"></div> 
</div>

#bigDiv{
       width: 500px;
       height: 500px;
       background: #ababab;
       overflow-x: scroll;
}
.smallDiv{
     width: 100px;
     height: 100px;
     background: #ffffff;
     float: left;
     margin-left: 5px;
}

box-sizing:border-box добавь