Question

<div class="parent" style="width: 50px; overflow: hidden;">
  <div class="child" style="white-space: nowrap;">Some string of text wider than 50 pixels</div>
</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?

Answer 1

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

document.getElementById("child").scrollWidth;

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

Take a look at this fiddle:

http://jsfiddle.net/y8uZe/2

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/