Comment est-padding-top en tant que pourcentage de la mère de la largeur?

Voici un exemple:

http://jsfiddle.net/QZAd8/1/

Avis de la façon dont tout le rouge divs sont les mêmes height et ont padding-top:100%;, mais ils A & B sont différents rembourrage tailles... et il semble que le largeur du parent changements de cette valeur (note que C modifie la height de la mère, mais qui n'altère pas le rembourrage).

Pourquoi est-rembourrage liées à la largeur de cette façon?

Edit: pour des raisons historiques, et dans le cas jsfiddle s'en va, le code que j'ai utilisé dans mon exemple est comme suit...

CSS:

.outer {
  background-color: green;
  height: 300px;
  width: 70px;
  float: left;
  margin-right: 10px;
}

.middle {
  background-color: red;
  height: 100px;
  width: 50px;
  padding-top: 100%;
}

.inner {
  background-color: blue;
  height: 3px;
  width: 100%;
}

HTML:

<div class='outer'>
  <div class='middle'>
    A
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='width:100px'>
  <div class='middle'>
    B
    <div class='inner'>
    </div>
  </div>
</div>

<div class='outer' style='height:400px'>
  <div class='middle'>
    C
    <div class='inner'>
    </div>
  </div>
</div>