This is a test case:
<!doctype html>
<html>
<body>
<div style="margin: 0 auto; width: 950px; overflow: hidden;">
<div style="float: left; width: 660px">
<form><fieldset>
<pre style="overflow: auto">Test test test Test test test Test test test Test test test Test test test Test test test Test test test Test test test </pre>
</fieldset></form>
</div>
<div style="float: right; width: 260px">
Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum. Lorem Ipsum.
</div>
</div>
</body>
</html>
I want the code in <pre>
to show a scroll bar instead of overflowing into the "Lorem Ipsum" sidebar. If it's in a <fieldset>
(as in the example) it overflows.
If you remove the <form><fieldset>
it won't overflow anymore, but it won't show the scrollbar either (the overflowed text is simply clipped).
Here is what I want:
- If the text in the
<pre>
is longer than the available width it shouldn't overflow into "Lorem Ipsum" and it should show a scroll bar, whether it is in a<fieldset>
or not.