html - CSS: make overflow-x: hidden truly hidden?

Question

I have a div that is styled with overflow-x: hidden, but I'm finding that when there is a wider div inside it that contains text, the user can still drag sideways with the mouse to view the hidden text.

I would like to prevent that and make the text truly hidden. This jsfiddle should show what I mean: http://jsfiddle.net/YzsGF/11/ or here is the code:

<div id="outer">
   <div id="inner">
       How can I truly hide the text beyond the margin?
    </div>
</div>
#outer { 
    width: 150px; 
    height: 300px; 
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    width: 300px;
    overflow-x: hidden;
}

Is there a way that I can prevent the user from being able to see the hidden text?

UPDATE: I need overflow-y to work: it's OK that overflow-x is CSS3 only. It may help to explain the real-life scenario:

• I have an inner div of a fixed width but unknown length.
• When it is sufficiently short to fit in the outer div without a y-scrollbar, everything is fine.
• When the inner div becomes long enough for the outer div to need a y-scrollbar, one appears, but cuts off some of the right-hand content of the inner div. That's also OK (I left some RH padding deliberately), but what's not OK is that the user can select the text and drag it sideways, revealing the empty RH padding and hiding some of the text on the LH side.

Any solutions?

Answer 1

overflow-x: hidden, unlike overflow: hidden does not disable scrolling. It just causes the content to be clipped and to hide the scrollbar. The element itself is still scrollable via javascript or, as you've found out in some selection scenarios where the element auto-scrolls.

There is no non-javascript solution, and javascript is still messy because onscroll doesn't fire if the scrollbar is not visible (that is, the onscroll event is tied to the scrollbar changing position, not the actual scrolling of the element).

There are various workarounds. Andrew Dunn's solution of placing overflow:hidden on a wrapper, and setting the wrapper to the width of your container is one. But that just works around the problem, doesn't fix the actual problem. But if you're ok with that, then it's probably a good choice. Bear in mind that you need to apply this technique to all items within the container, or you can end up with the same problem.