如何阻止容器div允许内容溢出？

Question

好的，快速的虚构例子：

<div style="background: #CCC; margin: 10px;">
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</div>

如果我将浏览器的大小调整为小于600px（孩子＃2），我怎样才能阻止父div继续缩小到浏览器窗口（并在此过程中缩小子＃1）。

从本质上讲，如何阻止容器div在遇到内部最宽的孩子时进一步收缩？

内容是动态的，所以不能指定子的宽度，我只是设置子＃2的宽度来说明问题。如果有任何特定宽度的元素（例如图像或完全缩小的表等），它也是一样的。

Answer 1

我不是100％确定你要对你的网页做什么，允许外部元素扩展和收缩，但强迫内部设置大小，但我建议的第一件事是设置{{1}外部div上的css属性。你将遇到的问题是你现在已经在两个不同的地方指定了相同的值（对于css2来说，这只是一种生活方式）。

据我所知，没有css属性可以将父级的宽度限制为其子级的大小。如果绝对需要该功能，您可以用表替换外部div，但重新评估您的设计可能更好。也许如果你能详细说明为什么这是必要的，我们可以进一步提供帮助。

根据您的评论，您可以尝试这样的事情：

min-width

您必须拥有嵌套表的原因是因为外部表允许您控制html或body标签的边距/填充。当您将边距应用于正文时，它不会影响页面的宽度，并且您最终会在底部使用滚动条。嵌套表并让外表使用填充来模仿它解决了这个问题。 （其他人可能会想出一个更优雅的解决方案）

话虽这么说，如果你的容器div只是设置背景颜色，你可以设置屏幕的背景颜色。如果您的网页是合理的（我的设计师朋友会为我拍摄的东西），浏览器窗口会为您处理效果。

Answer 2

受到NickLarsen的深思熟虑和完整答案的启发：在您的容器上试试display: table-cell。