Identical CSS behaves differently when applied to either body or a div

Question

Using a DIV as container

<div class="container">
  <div class="half-hidden"></div>
</div>

CSS

.container {
  margin: 20px auto 0;
  width: 200px;
  height: 200px;

  border: 1px solid red;
  position: relative;
  overflow: hidden;
}

.half-hidden {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -50px;
  width: 100px;

  border: 1px solid teal;
}

Using body as container

<div class="half-hidden"></div>

CSS

Replace the above .container with body

Why?

Answer 1

As W3 Offical Doc says, and @Andy G too, doesn't have an overflow. In that case, overflow will be applied by UAs to the first child:

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.