Html CSS溢出隐藏赢得'；不适合100%

我有一个div元素，本质上我想把它变成一个窗口（某种类型）。基本上，在该div元素中是扩展到“窗口”（div元素）的视图端口之外的内容。以下是我试图实现的目标：

现在，我尝试创建一个固定大小的div元素，给它

overflow:hidden

，然后将较大的内容放在其中。问题是（到目前为止我只在chrome上测试过），当一个内部元素不再适合溢出区域内的100%时，它就会消失

为了了解我的意思，我附上了另一张照片：

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

这是一个可以解决的问题，而不需要做一些粗制滥造的事情（例如扩展“窗口”框的宽度，然后在右侧绝对定位另一个框以隐藏新区域）

编辑问题已经得到了回答，但这里有一把小提琴，让大家看看我想完成什么：

---

谢谢

如果我了解您希望能够滚动到内容？尝试

溢出：滚动
我想我理解你的意思。我认为您的元素正在下降到下一行，因为它们的父容器没有容纳它们。尝试在窗口内创建一个容器，以包含宽度等于其所有子元素的元素。例如，见

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>

最简单的选择是重新设计内部部分的样式，以便它们都适合而不是溢出


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

请参阅：

尝试添加中间人

div

嘿，保罗，继续做一个JSFIDLE，让我们看看你在做什么。Chad完美地回答了这个问题，但我把小提琴贴了出来，这样每个人都可以看到我在努力完成什么。谢谢我已经有了一个内部容器div（参见编辑中的演示），但是我缺少容器上定义的宽度。谢谢你的帮助！是的！它不一定是你孩子的确切宽度。很多图像/内容滑块会将其设置为99999像素或其他。
#container{
 width:400px;
 height:100px;
 border:5px solid gray;
 margin:10px;
}
.test{
 display:inline-block;
 width:25%;
 height:100%;
}

div