<div> 的宽度如何大于其最大宽度？

Question

我有一个<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工作的。

Answer 1

对于后来遇到这个问题的任何人，集体答案是以下情况可能导致 a<div>超过widthit's max-width：

1. 如果元素有 adisplay:block并且有任何增长空间，它将忽略它max-width（@参见 Wolfram Rong 的回答）

2. 当width和max-width冲突时（例如 width: 200% 和 max-width: 100px）；@see DKaikster 的回答（类似问题请min-width参阅下面的#4）

3. 如果<div>（或任何相关元素）没有正确关闭，浏览器将尽力处理错误的 HTML，结果可能会导致奇怪的情况；再次@see DKaikster的回答

4. 这是让我印象深刻的一个，它基本上是 #2 的另一个版本：如果min-width超过了<div>浏览max-width器可能（Chrome 当然会）忽略max-width（min-width@参见我对 DKalkster 答案的评论）

如果有人遇到任何其他方法来产生这种令人困惑的情况，请发表评论，我会很乐意更新这个答案，以便有一天我们可以对这个令人惊讶的挑战性问题有一个全面的答案。