Scroll Inner Divs inside Main Div

by nijinvinodan

HTML

<div class="scroll-container">
    <div class="inner-container">
        <div class="box"></div>
        <div class="box box1"></div>
        <div class="box"></div>
        <div class="box box1"></div>
        <div class="box"></div>
        <div class="box box1"></div>
        <div class="box"></div>
        <div class="box box1"></div>
        <div class="box"></div>
        <div class="box box1"></div>
        <div class="box"></div>
    </div>
</div>

CSS

.scroll-container {
    height: 200px;
    width: 400px;
    padding:10px;
    margin: 0 auto;
    border: 1px black solid;
    overflow-y: hidden;
    overflow-x: scroll
}
.inner-container {
    float: left;
    height: 180px;
    width: 3000px;
    border: 1px black solid;
    overflow-y: hidden;
    overflow-x: scroll
}
.inner-container .box {
    float:left;
    width:200px;
    height:180px;
    background: orange;
}
.inner-container .box1 {
    background:lightskyblue;
}