获取子div以在父级中触发溢出

Question

我有一个容器div（id = #game），它被设计为始终占据页面宽度的90％，我想在其中放置一个固定大小的div（id = #game_div）。现在很自然地在较小的屏幕上，这个内部div（1024 X 768）不适合容器，所以我想让它用滚动条溢出。

这是css：

#game
{
    max-width: 90%;
    overflow: scroll;
    padding: 20px;
}

#game_div
{
    width: 768px;
    height: 1024px;
}

当我隐藏内部div时，外部div显示如下，正确使用了90％的屏幕：

然而，当我添加内部div时，它将父级的大小推到屏幕外而不是触发溢出（那些滚动条是窗口滚动条而不是父级div＆＃39; s滚动条）：

如何阻止内部div导致父级扩展，而是强制它在父级中触发溢出，以便我可以使用这些滚动条？

Answer 1

这是因为正在触发身体溢出，你无法看到#game div的右侧。默认情况下，body标记包含overflow:visible，因此您可以通过

禁用该标记

body{
overflow:hidden;
} 

如果您只想在主窗口小于width: 768px;时隐藏隐藏的身体溢出，则添加媒体查询min-size，或者您可以通过$("body").css("overflow", "hidden");等javascript触发它p>

这是一个试用fiddle