Autoflow не работает над абсолютным позиционированным div в IE

Question

Я пытаюсь построить временную шкалу для отображения серии событий, может быть много событий, добавленных на шкалу времени, чтобы ее контейнер был установлен на autoflow, для визуальных целей у меня есть код здесь: http://codepen.io/tomevans1664/pen/QyLObL. Все это отлично работает в chrome, но в IE вертикальная шкала времени не связана переполнением.

HTML:

<div class="center"> 
     <div class="timeline"> 
      <div class="line"> 
      </div> 
      <div class="content"></div> 

     </div> 
    </div> 

CSS:

body{ 
    margin: 0; 
    padding: 0; 
} 
.center{ 

    margin-left: auto; 
    margin-right: auto; 
    width: 800px; 
    height: 500px; 
    border: 1px solid #dddddd; 
    overflow-y: auto; 
    overflow-x: none; 
} 
.line{ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    height: 100%; 
    width: 5px; 
    background: #d7e4ed; 
} 
.content{ 
    height: 1000px; 
} 
.timeline{ 
    position: relative; 
    width: 100%; 
    min-height: 50px; 
} 

IE Screenshot: http://imgur.com/0pUVtOi

Answer 1

Так оказывается, для IE, что переполнение абсолютного позиционирования содержимого, содержащего DIV, который имеет атрибут переполнения должен также использовать абсолютное позиционирование, хотя это нарушает автоматическую маржу.

Чтобы .center центрируется снова я использовал:

left: 50%; 
    transform: translate(-50%, 0); 
    -ms-transform: translate(-50%, 0);