Why is em not behaving as defined

It is not working because the line-height. On the Mozilla Developer Network you can find the following information about the default value of the line-height:

Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.
https://developer.mozilla.org/en/docs/Web/CSS/line-height

On the following code, the line-height will be reset to 1em and the whole text fits the div:

div {
  background-color:red;
  height:8em;
  line-height:1em;
}

<div>
  One<br/>Two<br/>Three<br/>Four<br/>Five<br/>Six<br/>Seven<br/>Eight
</div>

From the official W3C specification:

Tells user agents to set the used value to a "reasonable" value based on the font of the element. The value has the same meaning as . We recommend a used value for 'normal' between 1.0 to 1.2. The computed value is 'normal'.
https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height

But every user agent (browser) defines the height of line-height itself on the recommended value between 1.0 and 1.2!

The default line-height is not 1 so each line is taller than the font-size of the text inside it.