Digamos que tengo hijos aleatorios en mi div, que tiene una altura y un ancho fijos establecidos al 100% para respirar con el diseño.

¿Qué CSS debo usar para forzar que los elementos secundarios se alineen horizontalmente y cuando el ancho del div es más pequeño que el contenido, se muestra una barra de desplazamiento y no se superponen?

Violín:http://jsfiddle.net/GRBc6/1/

css simple:

.parent{
    width:500px;
    height: 50px;
    background-color: red;
}
.kid{
    width: 150px;
    height: 20px;
     background-color: green;
    float:left;
    margin-left:4px; 
}