如果在祖父母之外，则溢出children元素

Question

一开始我想解释一下我的问题，我有一个主容器主体，它的宽度是auto，最小宽度是960px（屏幕的宽度可以大于子容器的宽度），有一个子容器，它的边距是auto和宽度是960px，在子容器中，我有一个具有绝对位置的元素（map），它总是在父容器之外，但并不总是在主体之外，当我调整窗口的大小时，主体的宽度发生了变化，然后元素像往常一样在主体之外，在其父元素之外，我试图将其剪裁，如果它在主体之外的话，因为它会使我的布局在右侧出现白色间隙，但不知道怎么做，一些主体能解释我怎么做吗？

http://jsfiddle.net/8hbynzfb/

<div id="content">
    <div class="container">
        <div id="info">
            Test
        </div>
        <div id="map">
        </div>
    </div>
</div>

* {
    padding: 0;
    margin: 0;
}
body {
    border: 2px solid black;
    min-width: 960px;
}
.container {
    position: relative;
    width: 960px;
    margin:0 auto;
    outline: 1px solid red;
    font-size: 0;
}
.container .col-left {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid green;
}
.container .col-center {
    position: relative;
    display: inline-block;
    margin-right: 41px;
    width: 293px;
    outline: 1px solid blue;
}
.container .col-right {
    position: relative;
    display: inline-block;
    width: 292px;
    outline: 1px solid yellow;
}
.container > div {
    vertical-align: top;
    font-size: initial;
}
#info {
    display: block;
    height: 84px;
    margin-left: 900px;
}
#map {
    display: block;
    height: 256px;
    position: absolute;
    background-image: url('http://gis.meridenct.gov/meriden/images/i_map.png') no-repaet;
    width: 256px;
    right: -128px;
    top: 0px;
    outline: 1px solid yellow;
}

Answer 1

只需在主体中添加一个溢出属性：

body {
    border: 2px solid black;
    min-width: 960px;
    overflow: hidden; /* this is new */
}

更新的jsfiddle示例

EDIT：要仍然具有滚动条，请将溢出规则添加到#content。

body {
    border: 2px solid black;
    min-width: 960px;
}
#content {
    min-width: 960px;
    overflow: hidden;
}

更新的jsfiddle示例