Estoy trabajando sobre una simple web estática con información personal para probar el diseño adaptativo. Para ello utilizo la propiedad display: flex y en los child items utilizo flex. No entiendo cómo renderiza Webkit que mezcla el contenido superponiéndolo en vez de separarlo o acomodar contenido abajo. Esto no pasa en Firefox.
Les dejo
el .zip con los tres archivos: .html + css para tamaño + css para colores
Si en el personal_sizes.css quito el *{float: left} el contenido no se superpone, pero no se acomoda a la izquierda inline. Si lo pongo el contenido se acomoda a la izquierda inline pero se superpone. Sólo pasa en chromium/chrome. Estoy en Linux así que no lo he probado en IE. Tampoco lo he probado en opera.
Tampoco influye el reset ni el normalice.
¿Alguien puede decirme qué está pasando y cómo solucionar este problema?