How come overflow:hidden works on a div but not a fieldset in firefox?

Question

I have a fieldset that looks like this:

<fieldset>
    <input><label>tada</label>
    <input><label>tada</label>
</fieldset>

fieldset{
    overflow: hidden;
    height: 20px;
}

input{
    display: block   
}

Js-fiddle:

http://jsfiddle.net/GWdWy/1/

how come the fieldset shows all it's containing elements, whilst if I change the fieldset to a div: http://jsfiddle.net/GWdWy/2/

the overflow hidden works.

I am on Opera 15 and the overflow is hidden for the fieldset also. — Harry, Sep 26 '13 at 10:41
Looks like a browser (firefox?) bug ... It's working in Chrome. — Darren Crabb, Sep 26 '13 at 10:42

Mr. Alien · Accepted Answer · 2013-09-26T10:48:10.547

4

I guess you must be on Firefox, if it's that so, than it's a bug

Bug 261037 - overflow property not implemented on fieldset

Workaround: I nested a div inside the fieldset

Demo

fieldset div {
    overflow: hidden;
    height: 20px;
}

edited Sep 26 '13 at 10:48

answered Sep 26 '13 at 10:42

Mr. Alien

153,751
34
298
278

score 2 · Answer 2 · answered Oct 29 '13 at 23:23

I had the same issue. Firefox does not seem to allow overflow: hidden on fieldset tags regardless if you use overflow-y or overflow-x. My fix was using '-moz-hidden-unscrollable'. Like this...

fieldset{
    overflow: -moz-hidden-unscrollable;
}

It is a dirty hack but it works.

re: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values

score -2 · Answer 3 · edited May 23 '17 at 12:01

-2

The fieldset has padding applied by the default browser css settings.

Use a CSS Reset to make sure the defaults are equalised in all browsers and elements.

Check the most used one - Eric Meyer's reset: http://meyerweb.com/eric/tools/css/reset/

in your first fiddle set following css for the Fieldset:

fieldset{
  overflow: hidden;
  height: 20px;
  padding: 0;
  margin: 0;
  border: none;
}

and this will equalize the display. For Firefox a workaround can be found here: Fieldset contents overflow in Firefox

edited May 23 '17 at 12:01

Community

1
1

answered Sep 26 '13 at 10:44

mzografski

274
2
9

2

Padding does not affect overflow. – BoltClock Sep 26 '13 at 10:44
well... check Chrome. – mzografski Sep 26 '13 at 10:48
@mzografski: Mate, are you suggesting this as a fix for Firefox? – Harry Sep 26 '13 at 10:48
nope, I do not. possible fix I saw here: http://stackoverflow.com/questions/3137741/fieldset-contents-overflow-in-firefox – mzografski Sep 26 '13 at 10:51

How come overflow:hidden works on a div but not a fieldset in firefox?

3 Answers3

Linked