Max-hauteur, sur la frontière boîte div avec un rembourrage n'est pas définie

Nous utilisons le pourcentage truc sur les rembourrages pour conserver les proportions d'une div lorsque l'utilisateur échelles sa fenêtre. Comme ceci:

.div {
    background: red;
    width: 80%;
    margin: 0 auto 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 20%;
}

Maintenant, nous aimerions être en mesure de définir une hauteur maximale de cette div. Parce que la hauteur de la div est déterminé par le rembourrage sur la div nous aurions besoin de la div à la frontière en boîte. So far So good. Lorsque vous essayez d'utiliser un min-height sur le div, cela fonctionne. Le max-hauteur sur ce div, cependant, ne fonctionne pas pour une raison quelconque.

.div {
    max-height: 60px;
}

J'ai créé un violon pour vous montrer ce que je veux dire: http://jsfiddle.net/UxuEB/3/.

Testé sur Chrome, FF et IE. Quelqu'un peut-il me dire ce que je fais mal ou pourquoi cela ne fonctionne pas comme prévu?