Сделать ColumnHeader так широко, как в колонке Css

Question

То, что я пробовал:

http://codepen.io/helloworld/pen/BcjCJ

Я хочу, чтобы каждый столбец имеет визуально такой же ширины, как и заголовок столбца.

В настоящее время заголовок столбца немного шире, чем столбец, только видя пером.

Откуда происходит это «пространство», которое делает заголовок столбца немного шире столбца?

UPDATE

Только что узнал его текст, который создает скроллбар на «стол»

Можно ли добавить этот размер полосы прокрутки к первой ширине заголовка столбца без использования JavaScript могут быть умным Функция css3/SASS? calc() независимо от того, ...

Я не могу обнаружить плохую прокладку/маржу.

HTML

<div id="gridHeader">  
     <div class="columnHeader">Monday</div> 
     <div class="columnHeader">Tuesday</div>   
    </div> 
    <div id="gridContent"> 

    <!-- Monday Column--> 
    <div style="background:lightblue;" class="column"> 
     <!-- ko: foreach-->  
     <div class="row">1111111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 111111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 1111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 11111111111111111111111111111111 111111111111111 111111111111111 1111111111111</div> 

     <div class="row">2222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222222222222222222222222222 2222222222222222222222222222 22222222222222222222222222222222222222 2222222222222222222222222222 222222222222222222222</div> 
    </div> 

    <!-- Tuesday Column--> 
    <div style="background:green;" class="column"> 
     <!-- ko: foreach--> 
     <div class="row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd dffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div> 
     <div class="row">fsadffsfsfsd fsdsfdfsdfsadffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadfffsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadfsadffsfsfsd fsdsfdfsdfsadfsadsad</div> 
    </div> 

    </div> 

CSS

.columnHeader{ 
    border:1px solid red; 
    background:yellow; 
} 

.columnHeader, .column{ 
    -webkit-box-flex: 1; 

    /* This causes that all headers have the same width independently from their content */ 
    width:100%; 
    font-weight:bold; 
    font-size:1.2em; 

} 

#gridHeader{ 
    display: flex; /* current version */ 
/* This causes that all columns have the same width independently from their content */ 
    width:100%; 
    align-items: center; 
    text-align: center; 
    position:fixed; 
    top:0px; 
    left:0px; 
    height:50px; 
    background:gray; 
} 

#gridContent{ 
    display: -webkit-box; 
/* This causes that all columns have the same width independently from their content */ 
    width:100%; 
    position:fixed; 
    top:50px; 
    left:0px; 
    bottom:0px; 
    overflow-y:auto; 
    overflow-x:hidden; 
} 

*{ 
    box-sizing:border-box; 
} 
.row{ 
    height:200px; /* fix this with flex that the equal height is taken*/ 

    overflow-y:auto; 
    overflow-x:hidden; 
    border:1px solid blue; 
    background:orange; 
} 

Answer 1

Для решения этой проблемы необходимо удалить переполнение-х и переполнение-у от вашего #gridContent и вашего класса .row.

Полоски прокрутки делают их не похожими на выровненные.