Google Chrome - Fieldset Overflow Bug

Question

Google Chrome seems to have a bug when overflowing content inside of a fieldset.

Here is a jsfiddle that demonstrates the problem: http://jsfiddle.net/Dismissile/Lnm42/

If you look at the page, you will see that when you have a container inside of a fieldset, and the container has overflow: auto set, and that container has content that will overflow horizontally, the fieldset actually expands instead of using a scrollbar:

<fieldset class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
     </div>
</fieldset>

<div class="parent">
    <div class="child">
        <div class="grandchild">
            asdf
        </div>
    </div>
</div>

CSS:

.parent {
    border: 1px solid green;
    padding: 20px;
    margin: 20px;
}

.child {
    border: 1px solid red;
    padding: 20px;
    overflow: auto;
}

.grandchild {
    border: 1px solid #ccc;
    width: 2000px;
    padding: 10px;
}

Is there a CSS hack/fix I can use so that content overflows properly when inside a fieldset in Chrome?

Answer 1

Try:

fieldset {
  display: table-cell;
  min-width: 0;
  box-sizing: border-box;
}

This is your example with fix: http://jsfiddle.net/2u3a9goc/

Answer 2

UPDATE:

As of a recent Chrome for MS Windows update (v28 maybe? Haven't tracked it down yet), auto is no longer a valid value for min-width, and this solution no longer works!

New solution:

Using inherit instead of auto appears to fix the issue for all cases I have tested so far. (Including the original fiddle.. see the new fiddle fix for details.)

The updated fix: FIELDSET {min-width: inherit; }

Original answer:

Chrome defines for fieldset the default user agent style: min-width: -webkit-min-content.

So when your viewable area (aka "screen") is smaller than your div with specific width, the -webkit-min-content grows the fieldset to accommodate the size of the contents (plus padding, etc.).

The fix: FIELDSET { min-width: auto; }

I fixed your fiddle, try it out!

Answer 3

Using a pseudo fieldset (aka <div class="fieldset"></div>) I believe you can get close. See jsfiddle.

Try this styling:

fieldset,.fieldset {
   margin: 10px;
   border: solid 1px black;
   position: relative;
   padding: .5em;
}

.legend {
   left: 0.5em;
   top: -0.6em;
   color: black;
   position: absolute;
   background-color: white;
   padding: 0 0.25em 0 0.25em;
}

It is less than ideal as fieldset styling needs to be duplicated, but for me it was the only tolerable solution to my run-in with this problem that I have been able to come up with. As above you may be able to apply your existing fieldset styling to the pseudo one.