De acuerdo con las especificaciones paraheight el cuadro que contiene el elemento debe tener un explícitoheight para que la altura porcentual funcione en el elemento (es decir, un valor numérico de100% altura utilizada en todos los cuadros que contienen padres).

Sin embargo, ¿por qué las mismas reglas no parecen aplicarse para el porcentaje?widths? Cuando establezco un porcentajewidth en un elemento con un cuadro contenedor que no tiene explícitowidth, todavía parece cambiar el ancho del elemento. (ver ejemplo)

.first {
    background-color: teal;
}
.second {
    background-color: gold;
    width: 30%;  /* the '.second' box becomes narrower! */
    height: 40%; /* <-- doesn't have any effect         */
}

<div class="first">
    ""
    <div class="second">
    ""
    </div>
</div>