CSS溢出隐藏元素不适合100％

Question

我有一个div元素，我基本上想要变成一个窗口（各种各样）。基本上，在div元素中的内容超出了“window”（div元素）的视口。这是我想要完成的事情的图片：

现在，我尝试创建一个固定大小的div元素，然后给它overflow: hidden，然后将更大的内容放在其中。问题是（到目前为止，我只在chrome中对此进行了测试），当其中一个内部元素不再适合溢出区域中的 100％时，它就会消失。

要知道我的意思，我附上了另一张照片：

请注意，右边的绿松石部分丢失了（抱歉黄色左边的白色间距，这对我来说只是一个糟糕的裁剪工作）。

这是一个可解决的问题而不做一些hackish（比如扩展“window”框的宽度，然后在右边部分绝对定位另一个框来隐藏那个新区域）？

编辑这个问题已经得到解答，但是这里是每个人看到我想要完成的事情的小提琴：http://jsfiddle.net/MRnL6/1/

谢谢！

Answer 1

我想我明白你的目标是什么。我认为你的元素正在下降到下一行，因为它们的父容器没有持有它们。尝试在窗口中创建一个容器，以包含宽度等于其所有子元素的元素。例如，请参阅this fiddle。

HTML：

<div id="window">
    <div id="container">
        <div class="elem one"></div>
        <div class="elem two"></div>
        <div class="elem three"></div>
        <div class="elem four"></div>
    </div>
</div>

和CSS：

#window {
    height: 100px;
    overflow: hidden;
    width: 250px;
}
#container {
    width: 400px;
}
.elem {
    height: 100px;
    float: left;
    width: 100px;
}
.one {
    background: #0f0;
}
.two {
    background: #f0f;
}
.three {
    background: #ff0;
}
.four {
    background: #0ff;
}

Answer 2

如果我了解您希望能够滚动到内容？试试overflow:scroll。

Answer 3

我认为你正在努力完成这样的事情。

请参阅： http://jsfiddle.net/UMJwT/2/

尝试添加中间人

div

Answer 4

最简单的选择是重新设置内部部分，使它们都适合而不是溢出。

See this demo

#container{
 width:400px;
 height:100px;
 border:5px solid gray;
 margin:10px;
}
.test{
 display:inline-block;
 width:25%;
 height:100%;
}