Can't get a DIV inside a fieldset to not exceed browser width

Question

When I nest a DIV I can make the inner DIV fit into the outer DIV which is the width of the browser and just have a scrollbar for the content in the inner DIV:

<body>
    <div style="width:100%; border: thick dotted blue">
        <div style="width:99%; overflow: auto; border: thick dotted green">
            ================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
        </div>
    </div>
</body>

When I try to do the same thing with a fieldset the DIV just goes off the page to the right despite the width: 100%. The only browser the code below works the way I want is in Internet Explorer. In Firefox and Chrome it is exceeding the width of the browser on me:

<body>
    <div style="width:100%;">
    <fieldset style="width:100%;">
        <legend>test</legend>
        <div style="width:100%;  overflow: auto;">
            ================================================================================================================================================================================================================================================================================================================================================================================================================================================================================================
        </div>
    </fieldset>
    </div>
</body>

How do I make the fieldset code act like the code up top and not have its content exceed the browser width?

score 0 · Answer 1 · edited Apr 14 '21 at 05:50

After some further searching I came across a hack in this post at stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears- to-have-unremovable-min-width-min-content. Basically you have to add the following CSS to your site/page, so that fieldsets behave the way I want them to above in Gecko based browsers:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

Can't get a DIV inside a fieldset to not exceed browser width

1 Answers1