Weird stuff is going on in the css somewhere on the browser parsing.
I can not explain why it is doing what it is doing, maybe someone else has a clue on that one.
But here is an alternative method to get your desired effect using display:inline-block;
<div class="init" style="width: 100%; height: 8em; overflow: hidden; background-color: gray;">
<h3>Using inline-block:</h3>
<div style="display:inline-block;">
<div style="display:block;height: 2em;">
<div style="display:inline-block;width: 4em; overflow: hidden; background-color: green;">
<div style="height: 2em; overflow: hidden; max-height: 2em;">
<span>links </span>
</div>
</div><div style="display:inline-block;width: 8em; overflow: hidden; background-color: red;">
<div style="height: 2em; overflow: hidden; max-height: 2em;">
<div style="width: 2em; height: 2em; background-color: white;">
</div>
</div>
</div>
</div>
</div>
</div>
Here is link to your fiddle updated:
http://jsfiddle.net/ev092xoq/4/[
^]
In your version: borders added to all divs and an additional table equivalent.
It can be seen the div-td-cells are taking more height than they should do (if compared the table equivalent).
--Solution revisited--
Add some text or
to the White div and it works:
<div style="width: 2em; height: 2em; background-color: white;">text or something needs to be added here</div>
Updated fiddle:
http://jsfiddle.net/ev092xoq/6/[
^]