Динамический div, который расширяется горизонтально

Question

Я понимаю, как это сделать с помощью Javascript, но в настоящее время я в основном сосредоточен на выполнении этого с помощью css.

Пример:

CSS

#parent { 
    height: 200px; 
    overflow-y: hidden; 
    overflow-x: auto; 
} 

Javascript

.child { 
    height 200px; 
    width: 200px; 
} 

$("#parent").on("click", function() { 
    $(this).append("<div class='child'></div>"); 
}); 

HTML

<div id="parent"> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

С этим сказать изменение размера окна только 600 пикселей. На 4-го ребенка div должен будет расширяться. Я хочу, чтобы этот контент был скрытым, но вы можете прокручивать его по горизонтали, чтобы просмотреть его.

Answer 1

Eugene Xa получил половину ответа. white-space: nowrap работает только с текстом. Таким образом, для того, чтобы это работало над div, как задает вопрос, вы должны установить дочерний элемент в встроенный блок;

#parent { 
    height: 200px; 
    overflow-y: hidden; 
    overflow-x: auto; 
    white-space: nowrap; 
} 

.child { 
    height 200px; 
    width: 200px; 
    display: inline-block; 
}