Two div lines: why overflow: hidden; causes vertical displacement?

Question

I have two divs sitting next to each other on the same line as display: inline-block; https://jsfiddle.net/3q0kbv2k/ . When I put overflow: hidden;in the first div, the second is shifted down by a slight offset.

Html:

<!-- CODE ON ONE LINE ON PURPOSE -->
<!-- WHITESPACES BREAK LAYOUT -->
<div class="foo">foooooooooooooooooooooo</div><div class="bar"><div>bar</div></div>

Css:

.foo {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
}

Why is this happening?

I found this old question that depicts the same scenario and contains a workaround, but I am interested to understand why this is happening, is this a mistake or normal behavior?

Answer 1

From spec :

" " - , , "" , "", .

div foo " ", - " ".

div bar , .

, vertical-align:

.foo {
    display: inline-block;
    width: 5%;
    margin-right: 1%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background: red;
    vertical-align: middle;
}

.bar {
    display: inline-block;
    width: 90%;
    background: yellow;
    vertical-align: middle;
}

<div class="foo">foooooooooooooooooooooo</div>
<div class="bar"><div>bar</div></div>

Hide result