Take the 2-minute tour ×
<div class="parent" style="width: 50px; overflow: hidden;">
  <div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div>

Both .parent, and .child report width of 50px, but .child should be extending beyond 50 pixels. Is there a way to determine by how much a child element overflows its parent?

e.g. something like if .child were position: absolute, how wide would it be, without actually making it position: absolute?

share|improve this question
Wouldn't it help if you provided what methods you're using to get the width of the elements...? –  Ian Sep 14 '12 at 3:40
Sorry. Using $.width() –  aperture Sep 14 '12 at 3:47
add comment

1 Answer

up vote 0 down vote accepted

You want to know scrollwidth. E.g., http://jsfiddle.net/y8uZe/1


​ Edit: Definitely looks like some sort of bug in Firefox having to do with the white-space:nowrap.

Take a look at this fiddle:


You can clearly see here how scrollHeight is giving you the right value, and scrollWidth is actually giving the right value as well because the text is wrapping. But when you tell the div NOT to wrap that text, weird things happen.

In any case. SOME of the browsers have a bug. Either it's Safari/IE/Chrome or Opera/Firefox. And since Opera ALWAYS has bugs, I'm going to bet on it being wrong. :)

Also, as I read the definition from http://www.quirksmode.org/dom/w3c_cssom.html, scrollWidth is definitely the right property to use: "The width and height of the entire content field, including those parts that are currently hidden."

One last edit: If you change the inner div to display: table. It fixes the issue. You may or may not be able to do that depending on your CSS, but at least it's good to know. Example: http://jsfiddle.net/y8uZe/3/

share|improve this answer
Clearly not, as the alert says "50px" still, when it should be much more than that... –  Ian Sep 14 '12 at 3:41
@ianpgall: I get 278px on Chrome. –  Blender Sep 14 '12 at 3:43
I get "50px" on Mac/Firefox –  Ian Sep 14 '12 at 3:43
Whoa. On Firefox and Opera I get 50, but on IE, Chrome and Safari I get ~260. WTF...Investigating... –  aquinas Sep 14 '12 at 3:44
That must be a bug in FF/Opera. The specs say "The term content refers to the dimensions of the element's content area, including overflown content.". Also see dev.w3.org/csswg/cssom-view/#widl-Element-scrollWidth –  Pumbaa80 Sep 14 '12 at 4:17
show 3 more comments

Your Answer


