fix first and last divs css

Question

i want Fix first and last divs when i tying scrool on this example jsfiddle example here like on this image.

i tried on tablet but it is not working

Here is css

.mother_div {
    display:block;
    height:auto;
    width:500px;
    border:1px solid #000;
    overflow-x:scroll;
}
.child_divs {
    height:40px;
    margin-bottom:1px;
    background:green;
    display:block;
    width:1000px;
}
.child_divs div {
    float:left;
    line-height:40px;
    color:#fff;
    font-size:15px;
    width:100px;
    text-align:center;
}
.child_divs div:first-child {
    background:#ccc;
    color:#000;
}
.child_divs div:last-child {
    background:#ccc;
    color:#000;
}

Answer 1

What about this?

.child_divs div:first-child {
    background:#ccc;
    color:#000;
    position: fixed;
    left: 0;
}

.child_divs div:first-child + div {margin-left: 100px;}
.child_divs div:last-child {
    background:#ccc;
    color:#000;
    position: fixed;
    right: 0;
}

http://jsfiddle.net/jy0hmh9g/4/