Question

我有一个<div>：

display: block;
max-width: 150px;
position: static;
overflow: hidden;

但是，<div>的宽度为530px，远远超过我指定的max-width，我无法弄清楚原因。

当我检查Chrome中的<div>时，它非常清楚地显示正在应用max-width（并且没有被任何其他规则所取代），但同时在＆＃34; Computed＆＃34;选项卡清楚地显示530px宽度。

我虽然没有要求帮助调试我的特殊情况。相反，我只想了解在任何情况下overflow: hdden的块级元素的宽度是否超过其max-width。

显然，我并不完全了解max-width的工作原理。

Answer 1

如果你能提供完整的代码，我相当肯定我能够提供帮助。别担心，我不会剽窃你的工作。这个问题让我感兴趣。

但是，如果我不得不做出一个疯狂的猜测，这可能是以下几个原因： 1.使用宽度时：200％，最大宽度：100px;好吧，这样的事情往往会产生问题。 2.显示：阻止，该代码真的有必要吗？ Div默认为块元素。 3.您可以使用JS覆盖任何样式，并且最终可能不知道是什么原因导致了增加只是通过检查。你可能错放了一个结束标记，即

这是一个更清晰，更简洁的max-width工作方式：你想要一个宽度随内容增加的div，但是，你不希望它超过一定的宽度。所以，你写下面的代码：宽度：100％; 最大宽度：150px; 为了正确使用它，您可能必须在该100％宽度div内嵌入div以获得正确的效果。没有整个代码，真的很难说。但是，这也可能是另一个问题：

现在，如果将上面的div放在宽度为200px的容器div中，则100％width属性将接管，它也可能超过最大宽度。

Answer 2

max-width属性仅指定内容宽度。如果元素为display: block，则始终占用100％的可用空间。剩下的空间将填补保证金。

|--------------- 100% ------------------|
_________________________________________
|    150px    |      100% - 150px       |
|    Content  | Margin added by browser |
|_____________|_________________________|

Answer 3

对于后来遇到此问题的人，集体回答是以下情况会导致<div> width超过max-width <\ n / p>

如果元素有display:block且有任何增长空间，则会忽略它max-width（@ See Wolfram Rong的答案）
当width和max-width冲突时（例如，宽度：200％，最大宽度：100px）; @see DKaikster的答案（关于min-width的类似问题，请参阅下面的＃4）
如果<div>（或任何相关元素）未正确关闭，浏览器将尽力处理错误的HTML，结果可能会导致奇怪的情况;再次@see DKaikster的回答
这是打击我的那个，它基本上是＃2的另一个版本：如果min-width的{{1}}超过<div>浏览器可能（Chrome肯定会）忽略max-width支持max-width（@参见我对DKalkster的回答）

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

Answer 4

我是前端开发的新手。
我还想提一下，填充不计入宽度，有可能在内部<div>中，width被指定为100%，但是<div>使用padding可能看起来<div>超过了width
添加

-webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
        box-sizing:border-box;

可以解决这个问题。

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

4 个答案: