html - How to make div's width fit content not window -

in following code, how make "#wrap" width fit childs width, , not limit browser window bounds ?

html

<div id="wrap">wrap     <div id="menu">menu</div>     <div id="large-content">large content</div> </div> 

css

#wrap{background: #eee;} #large-content{background: #f1c40f; width: 1000px; height: 300px} #menu{background: #2c3e50; width: 100%; height: 50px} 

jsfiddle

https://jsfiddle.net/67egnpho/1/

the childs width 100% fitting it.

adding display: inline-block; keep inline it's contents.

#wrap{background: #eee; display: inline-block;}