好的，快速虚构的例子:
<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>
如果我将浏览器的大小调整为小于 600 像素宽(子 #2)，我如何才能阻止父 div 继续缩小到浏览器窗口(并在此过程中缩小子 #1)。
本质上，当容器 div 碰到其内部最宽的子级时，我如何防止容器 div 进一步缩小？
内容是动态的，所以不能指定 child 的宽度，我只是设置 child #2 的宽度来说明这个问题。如果有任何特定宽度的元素(例如图像或完全缩小的表格等)，也是一样的
最佳答案
我不是 100% 确定您要通过允许外部元素扩展和收缩但强制内部元素设置大小来尝试对您的网页做什么，但我建议的第一件事是设置 min -width 外部 div 上的 css 属性。这样做会遇到的问题是您现在在两个不同的地方指定了相同的值(对于 css2 来说这只是一种生活方式)。
据我所知，没有 css 属性可以将父项的宽度限制为其子项的大小。如果绝对需要该功能，您可以用表格替换外部 div，但重新评估您的设计可能是更好的主意。也许如果您能更具体地说明为什么这是必要的，我们可以提供进一步的帮助。
根据您的评论，您可以尝试这样的操作:
<html>
<head>
<title>Hi</title>
</head>
<body style="margin: 0; padding:0;">
<table style="background: red;padding:100px;width:100%;" cellspacing="0"><tr><td>
<table style="background: #CCC; width:100%;border:none;" cellspacing="0"><tr><td>
<div style="width: 50%; height: 400px; background: #FFF;">Child #1</div>
<div style="width: 600px; height: 400px; background: #999;">Child #2</div>
</td></tr></table>
</td></tr></table>
</body>
</html>
你必须有嵌套表格的原因是因为外部表格可以让你控制原本是 html 或 body 标签的边距/填充。当您将边距应用于正文时，它不会影响页面的宽度，并且您总是会在底部看到一个滚动条。嵌套表格并让外部表格使用填充来模拟它可以解决问题。 (其他人可能会想出更优雅的解决方案)
也就是说，如果您的容器 div 只是设置背景颜色，您可以只设置屏幕的背景颜色。如果您的网页是左对齐的(我的设计师 friend 会为此开枪)，浏览器窗口会为您处理效果。
关于html - 如何阻止容器 div 允许内容溢出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2222459/