Google Chrome - Fieldset Overflow Bug - html

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

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 2

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.

Answer 3

Try:
fieldset {
display: table-cell;
min-width: 0;
box-sizing: border-box;
}
This is your example with fix: http://jsfiddle.net/2u3a9goc/

Answer 4

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.

Answer 5

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