Why do “inline-block” elements in a “nowrap” div overflow?

Answer 1

This content wrap because of white-space: normal;.

The white-space CSS property determines how whitespace inside an element is handled. To make words break within themselves, use overflow-wrap, word-break, or hyphens instead. Now there if you want to limit this with #wrapper than you can limit the overflow property for the div.If you using white-space: nowrap; for div this clear the overflow text and show the div in a single line (ROW).

#wrapper {
    background: #fea;
    width: 50%;
    overflow: hidden;
}

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

#logo img {
       width: 6em; 
}

#headline {
     display: inline-block;
     vertical-align: middle;


}