我有一个<div>，带有：
display: block;
max-width: 150px;
position: static;
overflow: hidden;
然而，<div>的宽度为530px，远远超过了我指定的max-width，我不知道为什么。
当我在Chrome中检查<div>时，它非常清楚地显示了正在应用的max-width（并且没有被任何其他规则胜过），但同时在"计算"选项卡中，它清楚地显示530px宽度。
不过，我并不是在请求帮助调试我的特定情况。相反，我只是想了解在任何情况下，具有overflow: hdden的块级元素的宽度如何超过其max-width。
很明显，我并没有完全理解max-width是如何工作的。
我是前端开发的新手。
我还想提到的是，填充不计入宽度，并且可能在内部<div>中，width被指定为100%，但具有padding的<div>看起来可能是<div>超过了width
正在添加
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
可以解决这个问题。
对于以后遇到这种情况的人来说，总体答案是以下情况可能导致<div>的width超过其max-width：
-
如果元素有一个
display:block，并且有任何生长空间，它将忽略它的max-width（@见Wolfram Rong的回答） -
当
width和max-width冲突时（例如宽度：200%，最大宽度：100px）@参见DKaikster的答案（关于min-width的类似问题，请参见下面的#4） -
如果
<div>（或任何相关元素）没有正确关闭，浏览器将尽最大努力处理糟糕的HTML，结果可能会导致奇怪的情况；再次查看DKaikster的回答 -
这是一个让我印象深刻的版本，它基本上是#2的另一个版本：如果
<div>的min-width超过了max-width，浏览器可能会（Chrome当然会）忽略max-width而选择min-width（@请参阅我对DKalkster答案的评论）
如果有人遇到任何其他方法来产生这种令人困惑的情况，请发表评论，我很乐意更新这个答案，这样有一天我们就可以对这个令人惊讶的挑战性问题有一个全面的答案。
如果你能提供完整的代码，我很确定我能提供帮助。别担心，我不会剽窃你的作品。这个问题引起了我的兴趣。
但如果非要我胡乱猜测的话，这里有几个原因：1.当你使用宽度：200%，最大宽度：100px；这样的事情往往会产生问题。2.display:block在那个代码中真的有必要吗？默认情况下，Div是块元素。3.您可以使用JS覆盖任何样式，并且可能仅通过检查就不知道是什么导致了增加。4.您可能放错了结束标签，即
以下是最大宽度如何工作的更清晰、更短的版本：您希望div的宽度随着内容的增加而增加，但是，您不希望它超过某个宽度。因此，您编写以下代码：宽度：100%；最大宽度：150px；为了正确使用它，您可能必须在100%宽度的div中嵌套一个div才能获得正确的效果。没有完整的代码真的很难判断。然而，这可能也是另一个问题：
现在，如果您将上面的div放置在宽度为200px的容器div中，则100%width属性将接管它，并且它可能也超过最大宽度。
max-width属性仅指定内容宽度。如果元素是display: block，则它将始终占用100%的可用空间。剩余的空间将用空白填充。
|--------------- 100% ------------------|
_________________________________________
| 150px | 100% - 150px |
| Content | Margin added by browser |
|_____________|_________________________|