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

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.