CSS: cómo hacer que los niños se ajusten al ancho de los padres

Question

Creo elemento primario con un número de div elementos secundarios que luego calculo ancho en JavaScript, dependiendo del atributo data-value.

Si comparo el ancho calculado para todos los niños, terminaré con el 100%. Pero, por alguna razón, los niños no ocupan realmente el 100% del ancho de los padres: una porción de píxeles blancos aparece justo después del último hijo.

Este es un violín que demuestra esto: http://jsfiddle.net/tqVUy/42/

Chrome y Firefox lo traducen bien, me enfrento a este problema en Safari y Opera (vea la imagen de abajo).

Además de eso, overflow propiedad no funciona como se espera, como elementos secundarios se superponen a los padres div (de nuevo, relevante sólo en Safari y Opera).

Preguntas:

1. ¿Existe otra manera (derecha) para hacer que los niños de los padres en forma?
2. Esquinas redondeadas y overflow: hidden para el padre, ¿puedo hacer que se vea igual en todos los navegadores?

Answer 1

css Añadido:

#component>div{height:100%;} 
#component>div:first-of-type{border-radius:30px 0 0 30px;} 
#component>div:last-of-type{border-radius: 30px;} 

Editar en JS:

$('#component').children().not(':last').each(function() { 

Lo que sucede:
La última div no flotará izquierda, y solo llenará el espacio que queda. Agregué esquinas redondeadas al primer y último div para corregir el problema de la esquina. el último div tiene un radio de 30px en cada esquina, ya que el div Es en realidad detrás de los otros divs (se puede ver esto con inspeccionar elemento)

Demostración:
http://jsfiddle.net/tqVUy/48/

Answer 2

También me enfrento a ese tipo de problema. Es por eso que define radio de borde para el niño también. Escribe así:

#component > div:first-child{ 
    border-radius:30px 0 0 30px; 
} 
#component > div:last-child{ 
    border-radius:0 30px 30px 0; 
} 

Marque esta http://jsfiddle.net/tqVUy/49/