Home/ Questions/Q 974851
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T03:29:48+00:00

This is a test case: <!doctype html> <html> <body> <div style=margin: 0 auto; width:

  • 0

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.
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is obeying it, but in the context of it’s default behavior. It doesn’t have a width currently, and the default behavior of a <pre> is to not have a width (but rather to expand into available space…and it’s parent is willing to expand to accommodate it) so it’s acting correctly.

    If you want it to fit, just give it the same width as the parent, like this:

    <pre style="overflow: auto; width: 660px;">
    • 0