Al usar box-sizing: border-box en CSS, asumo que el ancho total de un elemento se definirá en su valor de "ancho". Entonces, si digo que el ancho de una división es 20px y el borde derecho es 10px, terminaré con un cuadro que ocupa el espacio de 20px y la mitad es el borde derecho. Empujándolo hasta el punto donde establezco el ancho a 10px y el borde derecho, también, como aquí:

#box{
    overflow: hidden;
    width: 10px;
    box-sizing: border-box;
    height: 100px;
    background: black;
    border-right: 10px solid red;
}​

La casilla solo constará del borde rojo. ¿Qué debería pasar cuando establezco el ancho a 0px? Pensé que haría que todo desapareciera, pero no, el resultado es exactamente el mismo que el de arriba:jsFiddle

Mi pregunta es si este es el comportamiento esperado. Me parece inconsistente. Me gustaría hacer desaparecer una caja solo manipulando el ancho / alto. Gracias por cualquier entrada.