Google Chrome - Fieldset Overflow Bug

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

Solution 1:

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!

Solution 2:

Using JavaScript to set the width of the viewport:

• http://jsfiddle.net/Lnm42/2/

I added a class called fieldset-width to the fieldset:

<fieldset class="parent fieldset-width">

Then added this JQuery code:

$(document).ready(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

$(window).resize(function() {
  $(".fieldset-width").css("width", $(window).width() - 82);
});

My only comment is that I can't think of a good reason to interfere with the default fieldset functionality. I dislike "scroll bars within scroll bars" to begin with. For input fields, which fieldsets usually surround, I would be especially cautious about making the user scroll around to get to all the input fields.

Solution 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: 00.25em00.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.

Solution 4:

Try:

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

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

Solution 5:

You can add style="display:table-column;" to the fieldset as a workaround.