html - 为什么父 div 宽度不拉伸(stretch)到子宽度

Question

看看这个 jsfiddle:

http://jsfiddle.net/w9k2sz52/

#content {
    background: #ff0000;
    min-height: 200px;
}
.container-fluid {
    min-width: 2000px;
}

<div id="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h1>Some title here</h1>
            </div>
        </div>
    </div>
</div>

为什么#content 的宽度没有拉伸(stretch)为 2000px 而不是视口(viewport)的宽度？我需要做什么才能使内容拉伸(stretch)，以便无论在 container-fluid 上设置什么最小宽度#content 总是会拉伸(stretch)以适应它

Answer 1

将#content设置为inline-block，然后将min-width设置为100%。请注意，将 width 设置为 100% 不会产生预期的效果。

#content {
    background: #ff0000;
    min-height: 200px;
    min-width: 100%;
    display:inline-block;
}