Home/ Questions/Q 5842755
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T12:03:35+00:00

I have a problem with the HTML fieldset element in Chrome. I want to

  • 0

I have a problem with the HTML fieldset element in Chrome.

I want to have a fixed-height fieldset, and within it a scrollable div. Everything looks fine until I put a legend in – when I do so, the div spills out from the bottom of the fieldset. I also checked in Firefox, and it does not do this (i.e. does exactly what I would expect).

Anyone else seeing this? Is it a Chrome bug? Anyone know if there is a hack for this?

<!DOCTYPE HTML>
<html>
    <head>
        <title>a</title>
        <style>
            fieldset {
                height: 80px;
            }
            fieldset div {
                height: 100%;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <fieldset>
            <legend>Test</legend>
            <div>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
                Foo!<br/>
            </div>
        </fieldset>
    </body>
</html>

Screenshot

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Another solution, if you do not need to use the legend element, is to use an h1 and style appropriately. This works for me in both Chrome and FF.

    <!DOCTYPE HTML>
<html>
<head>
    <title>a</title>
    <style>
        fieldset {
            height: 80px;
        }
            h1 {
                margin:0;
                margin-top:-1em;
                font-size:1em;
                background:white;
                width:33px;
            }   
        fieldset div {
            height: 100%;
            overflow-y: scroll;
        }

    </style>
</head>
<body>
    <fieldset>
        <h1>Test</h1>
        <div>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
            Foo!<br/>
        </div>
    </fieldset>
</body>

    • 0