Home/ Questions/Q 7934199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:34:27+00:00

I’m trying to add a very wide div to an existing, non-fixed-size div .

  • 0

I’m trying to add a very wide div to an existing, non-fixed-size div. Here’s a minimal example (jsfiddle):

<html>
    <head/>
    <body>
        <div style="float: right; border: 1px solid green;">
            Some content
            <div id="problematic-div" style="border: 1px solid red; overflow: auto;">
                This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
                It_should_have_a_horizontal_scrollbar_instead
            </div>
            Some content here too
        </div>
        Main content goes here
    </body>
</html>

What happens is that the large inner div makes the outer div stretch to fit. I’d like the outer div not to resize (instead, to keep the size that it would have if the inner div wasn’t there), and instead have the inner div display a horizontal scrollbar.

This is very easy to do if it’s possible to know how large the outer div should be, and limiting the inner div’s width to that, but here I’d like to make the outer div‘s size criteria to be “use whatever width would fit all inner elements, except that wide inner div“.

In order to do this, my guess is that the inner div needs to ignored from the outer one’s size computations for width only, not for height, and that’s what I’m not sure how to do. I’ve tried a few things:

  • Setting the outer div‘s position to relative and then setting the inner one’s to absolute. This works to the extent that the outer div is no longer stretched by the inner one, but the horizontal scrollbar doesn’t appear, its position is at 0,0 from the top-left corner of the outer div, and it overlaps some of the outer div’s content
  • Making the inner div float, and wrapping it between two clear: both elements as follows, which still causes the outer element to stretch:

.

<div style="clear: both;"></div>
<div id="problematic-div" style="border: 1px solid red; float: left; overflow: auto;">
    This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
    It_should_have_a_horizontal_scrollbar_instead
</div>
<div style="clear: both;"></div>
Some content here too
  • Some Mozilla vendor prefixes of width (min-content, fit-content, available), but none of them seemed to have the effect I want

In short, I’d like an effect much like the HTML code listing above on this very page, but this page achieves it by setting a fixed width on the question container. Is such a thing possible?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As I’ve said in my comments, its not possible to limit a width without actually specifying that limit.
    Do you have any guide for the sizing of the columns on your page, such as percentages or setting the main column width? Otherwise the page does not know how much space to allocate to each column and the appearance of your page will be unpredictable.

    I gather the reason you don’t want to set a width is so you can use the full available width of the screen. Therefore I suggest you use percentages e.g 30% of your side column on the right. This gives a predictable layout, and also allows you to achieve the scrollbar you require on the inner content because you have specified a limit on the outer div. e.g.

    <div style="float: right; width:50%">
    Some content
    <div id="problematic-div" style="overflow-x: scroll; width: 100%;">
        This_is_a_very_long_unbreakable_string_but_I_don't_want_it_to_have_the_ability_to_stretch_the_div<br/>
        It_should_have_a_horizontal_scrollbar_instead
    </div>
    Some content here too
</div>

    You will need to test that cross-browser but it should work in the majority of browsers)

    • 0