Как padding-top как процент, связанный с шириной родителя?

Вот пример:

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

Обратите внимание, что все красные divs одинаковы height и имеют padding-top:100%;, но у них A и B имеют разные размеры дополнений... и кажется, что ширина родителя меняет это значение (обратите внимание, что C изменяет height родителя, но это не изменяет дополнение).

Почему добавление, связанное с шириной таким образом?

Изменить: по историческим причинам, а в случае, если jsfiddle уходит, код, который я использовал в моем примере, выглядит следующим образом:

.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%;
}

<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>

Ответы

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'
Value:      <padding-width> | inherit
Initial:    0
Applies to:     all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Inherited:      no
Percentages:    refer to width of containing block
Media:      visual
Computed value:     the percentage as specified or the absolute length