Почему элементы «inline-block» в div «nowrap» переполняются?

Следующий код вызывает переполнение #headline #wrapper, и я не понимаю, почему это происходит.

HTML:

<div id="wrapper">
    <div id="logo">
        <img src="/test.png">
    </div>
    <div id="headline">
        <h1>This headline overflows its wrapping div. # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #</h1>
    </div>
</div>

CSS:

#wrapper {
    background: #fea;
    white-space: nowrap;
    width: 50%;
}

#logo {
    display: inline-block;
    vertical-align: middle;
}

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;
     white-space: normal;
}

Пример кода:http://jsfiddle.net/XjstZ/21/ или жеhttp://tinkerbin.com/XvSAEfrK

Ответы на вопрос(4)

Ваш ответ на вопрос