html - Div element scrolling instead of wrapping -

i have html:

<div id="d0"> <div id="d1">hello</div> <div id="d2">some text here wrap not being wrapped</div> </div> 

and css:

#d0 {     white-space: nowrap; } #d0 > * {     white-space: normal;     display:inline-block; } #d1 {     width:300px;     background-color: #ff0; } #d2 {     background-color: #aaf; } 

fiddle: http://jsfiddle.net/yh8sc/1/

if resize window (or result area) whole thing not fit on 1 line, expect d2 wrap. however, behaving if d1 did not exist - d2 wraps when there not enough space display d2 alone on 1 line. tested chromium , firefox.

why happening , how can change behavior?

note: i'm using nowrap on d0 because don't want d2 pushed below d1. still contents wrap when can.

if understand you're trying accomplish, try applying float:left #d1. converts inline element. element after (#d2) fill space left on #d1. in case, since it's fluid element, text wrap. http://jsfiddle.net/k2xre/

#d0 {} #d1 {     width:300px;     background-color: #ff0;     float: left; } #d2 {     background-color: #aaf; }