Parent's padding influences vertical relative padding of child in Chrome

Question

I'm using the established method for keeping an element's ratio by setting a relative padding-bottom.

The relative vertical margins and paddings are relative to the width of the containing block, as is width itself.

The width in this case is apparently the one of the padding-edge, so including the padding. A 100% absolute child will cover the parent's padding.

.outer {
  border: 1px solid gray;
  width: 60px;
  height: 60px;
  padding: 5px;
  
  position: relative;
}

.inner {
  position: absolute;
  top: 0;
  height: 0;
  padding-bottom: 100%;
  
  left: 0;
  width: 100%;
  
  background-color: lightgreen
}

<div class="outer">
  <div class="inner">
  </div>
</div>

The code should render the .inner at 60 x 60 px², right?

There shouldn't be a difference in assigning height: 100% or padding-bottom: 100% to the child, right?

This is the case in Firefox, but not in Chrome. What's going on?

Apparently Chrome (and Safari) is taking the containing box's padding into account, which it shouldn't.

Or am I mistaken?

Answer 1

Apparently it's a bug in Webkit and Blink – or it's just not specified, as Sergiy pointed out.

I consider it a bug since width: 100% is taking paddings into account, and any other % units should behave the same.

I filed a bugreport which got accepted, it's fixed in v52 of Chrome.

Safari 10.1 still has the issue.