Горизонтальная прокрутка div с несколькими div внутри

Question

Я пытаюсь создать горизонтальную прокрутку div с несколькими div с текстом внутри. Проблема в том, что когда я пытаюсь поместить текст внутри, он накладывается на div рядом с ним. Как я могу исправить это и сделать текст ограниченным в div.

Вот пример кода http://jsfiddle.net/znu36yn3/1/

CSS:

.popup { 
    background-color: #fff; 
    color:#000; 
    padding: 15px; 
    position: fixed; 
    text-align: justify; 
width:100%; 
    height:50%; 
    padding:90px; 
    padding-top: 30px; 
text-align:center; 
    overflow-x:auto; 
    white-space:nowrap; 

} 
.popup div{ background-color: #8cc63f; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    font-size: 10px; 
    line-height:1; 
    padding: 0px 5px 0px 5px; 
    width:100%; 
    word-wrap: normal; 
    height: 150px; 
    overflow:hidden;} 

.d1{ 
    height: 200px; 
    width: 100%; 
    overflow: none; 
    display: inline-block; 
} 

Answer 1

Поскольку вы используете white-space: nowrap на родительский элемент, вам нужно использовать white-space: normal на дочерние элементы, а не word-wrap: normal.

Updated Example

.popup div { 
    white-space: normal; /* Added .. */ 
    background-color: #8cc63f; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
    font-size: 10px; 
    line-height:1; 
    padding: 0px 5px 0px 5px; 
    width:100%; 
    height: 150px; 
    overflow:hidden; 
} 

В качестве примечания, то font тег является устаревшим - не использовать его.