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

Question

The following code causes #headline to overflow #wrapper and I do not understand why this is happening.

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;
}

Example code: http://jsfiddle.net/XjstZ/21/ or http://tinkerbin.com/XvSAEfrK

Hyperbola

Answer 1

As the name suggests, inline-blocks participate in inline layout, which means they act just like inline elements, and text. white-space: nowrap causes text to overflow in an element by preventing it from wrapping; the same thing happens with inline-blocks. It's that simple.

The fact that #headline has white-space: normal has no impact on its own layout. An element's white-space property affects the layout of its contents, not itself, even if the element's own box is inline-level.

Threequarter

Answer 2

You need to use overflow: hidden; in your wrapper element

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

I updated your sample in jsfiddle http://jsfiddle.net/XjstZ/72/

Empathize

Not quite, as the content in <div id="headline"> gets truncated, per this fiddle forked from yours: jsfiddle.net/vkaggbx8 – Lavadalavage

Answer 3

Setting width to headline element fixes the issue.

#headline {
   display: inline-block;
   vertical-align: middle;
   width: 60%;
}

It's responsive if both image wrapper and image have their max-width defined.

#logo {
   display: inline-block;
   vertical-align: middle;
   max-width: 35%;
}

#logo img {
   width: 6em;
   max-width: 100%;
}

http://jsfiddle.net/tt1k2xmL/

Overwrought

This doesn't solve the issue when no-wrap is involved. Personally I want to use no-wrap without it breaking out. – Delivery

I however believe that in my case there is a format error. Too many closing div tags or not enough. – Delivery

Answer 4

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;


}

Hoem

This yields a different result. The headline is pushed below the image. – Hyperbola

But you can check my fiddle which give me the prefect result. – Hoem