Parent padding affects vertical relative padding of child in Chrome

Question

I use the set method to maintain the element relation by setting relative padding-bottom .

Relative vertical margins and gaskets relative to the width of the containing block, as well as the width itself.

The width in this case, apparently, is one of the extremes of the gasket, therefore, includes the gasket. A 100% absolute child will cover the parental supplement.

 .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 display .inner at 60 x 60 px², right?

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

This is in Firefox, but not in Chrome. What's happening?

Chrome (and Safari) seems to take into account the fill field, which it shouldn't.

Or I'm wrong?

Answer 1

Apparently, this is a mistake in Webkit and Blink - or it is simply not indicated, as Sergey pointed out.

I consider this a mistake, since width: 100% takes into account the gaskets, and any other% units should behave the same.

I filed a bugreport which was accepted, it is fixed in version 52 of Chrome.

Safari 10.1 still has a problem.