html - 如何使div的宽度适合内容而不是窗口

Question

在下面的代码中，如何让“#wrap”的宽度适合它的 child 的宽度，而不是限制在浏览器窗口范围内？

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/

Answer 1

child 的宽度是 100%，所以目前它适合它。

添加 display: inline-block; 将使其与其内容保持一致。

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