CSS not applied for field of div under scroll

Question

I have this jsfiddle example http://jsfiddle.net/AnnaMiroshnichenko/xjyb8/1/. I cant understand why when I scroll div, field which is placed under scroll does not apply css-rules for itself (why border and background-color for first row are not rendered). My css:

   .myL{
        background-color: #808080;
        float:left;
        width: 30%;
        height: 100%;
    }
    .myR{
        background-color: pink;
        float:right;
        width: 70%;
        height: 100%;
        overflow-x: auto;
    }
    .myRow{
        white-space: nowrap;
        height: 30px;
        border: 1px solid white;
    }
    .myHedaer{
        background-color: #02749c;
    }
    .myCol{
        width: 80px;
        display: inline-block;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .myFixedCol{
        width: 80px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

I would be grateful for any help!

Answer 1

you may need to add css as follows

DEMO

.myR .myRow {           
    min-width: 415px; /* (5 cells X 80) + 15 for text-overflow*/
}

Answer 2

this can be solved via JavaScript something like this

var Cols = $('.myR').children('.myRow').eq(0).find('.myCol').length;
var constant = 80;
var overflowVal = 15;
var calc = (Cols * constant) + overflowVal

/*constant and overflowVal need to be set as per data and requirement */

$('.myR').children('.myRow').css("min-width", calc)