How do i make a fieldset `display: block; overflow: auto` show a scrollbar?

Question

I want my <fieldset> elements to behave like vanilla <div>'s by filling their containing element and showing a scrollbar when they are set to overflow: auto.

For instance, I don't see why the fieldset in this example is wider than its containing div:

<div class=outer>
  <fieldset class=inner>
      fooooooooooooooooooooooooooooooooooooo
  </fieldset>
</div>

<div class=outer>
  <div class=inner>
    fooooooooooooooooooooooooooooooooooooooo
  </div>
</div>

and corresponding css:

.outer {
  width: 60px;
}

.inner {
  overflow: auto;
  display: block;
  height: 60px;
  border: 1px solid red;
}

aaronstacy · Answer 1 · 2013-03-18T15:51:39.463

7

It turns out the culprit (in some cases) was the user-agent stylesheet in webkit was setting:

fieldset {
  min-width: -webkit-min-content;
}

setting min-width: 0; in the stylesheet corrected the issue in Chrome 27, Safari 6.0.2, and WebKit Nightly r146031. It fails to correct the issue in Chrome 25 and FireFox 19.0.2.

Either way this does not solve the problem.

edited Mar 18 '13 at 15:51

answered Mar 18 '13 at 13:55

aaronstacy

6,189
13
59
72

@aaronstacy: you cannot accept your answer ;-) because it does not work in Firefox – Walter Tross Mar 18 '13 at 14:18
@ExplosionPills this does work for me in chrome, they are the same width, save for the fieldset's UA stylesheet-defined margin/padding. – aaronstacy Mar 18 '13 at 15:28
@WalterTross true, i'm taking a closer look at that now. – aaronstacy Mar 18 '13 at 15:28
@ExplosionPills i was seeing it work in chrome 27, Safari, and WebKit Nightly bulds, but you're correct it's not working in chrome 25 (stable). at least on Mac OS X. i can't figure out a way to make it work on FireFox either. this is stupid. i'll probably accept your answer, but just go with `
` in my app.
– aaronstacy Mar 18 '13 at 15:43

score 2 · Answer 2 · answered Mar 18 '13 at 13:59

2

<fieldset> does not inherit the width from the parent div. The .inner div does inherit the width and shinks. You can solve this just by adding width: inherit as a rule to .inner. Note that <fieldset> may also get some extra padding and margin.

http://codepen.io/anon/pen/fxjek

answered Mar 18 '13 at 13:59

Explosion Pills

188,624
52
326
405

Widths are never inherited by any element by default. The `div.inner` is being *constrained* to the width of its parent, but it itself does not *inherit* `width: 60px` from its parent. Also, specifying `width: inherit` doesn't appear to make a difference on Firefox. – BoltClock Mar 18 '13 at 14:00
@BoltClock maybe not by default, but can you explain the behavior of the `.inner` div having 58px width without any additional rule? – Explosion Pills Mar 18 '13 at 14:02
Since there are 1px borders on all sides, the height and width are constrained to 58px in order for it to fit in its parent. – BoltClock Mar 18 '13 at 14:08
@Boltclock why doesn't the fieldset get constrained? – Explosion Pills Mar 18 '13 at 14:17
That I can't explain - fieldsets are a strange beast when it comes to CSS. – BoltClock Mar 18 '13 at 14:28
@ExplosionPills it's because of the `min-width: -webkit-min-content'`, as i gave in my answer. your solution is close, but by setting `min-width` to 0, it behaves much more like a regular div. – aaronstacy Mar 18 '13 at 15:26
@aaronstacy your solution does not work for me in Chrome. I don't see the `min-width` rule in Chrome either. – Explosion Pills Mar 18 '13 at 15:26
@ExplosionPills sorry, i commented before seeing the thread on my answer. i'll continue discussion up there. – aaronstacy Mar 18 '13 at 15:34
@BoltClock just out of curiosity, do you know if `
`'s layout specified differently in a spec somewhere? it seems like they'd just be the same as `
`'s
– aaronstacy Mar 18 '13 at 15:53
@aaronstacy: All I know is that fieldsets establish their own block formatting contexts in HTML5, see http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats/6482054#6482054 and http://www.w3.org/TR/html5/rendering.html#the-fieldset-element-0. However I don't think this contributes to the effect that you see, because `div.inner` also creates its own BFC due to the `overflow: auto` property in your code, yet it looks different from the fieldset. – BoltClock Mar 18 '13 at 16:01
@BoltClock thnx for the info! – aaronstacy Mar 18 '13 at 16:04
@aaronstacy: No problem. There may be other browser-specific quirks at play, but I can't comment further. – BoltClock Mar 18 '13 at 16:09

score 0 · Answer 3 · answered Mar 18 '13 at 13:56

0

To fix your fieldset or make it like the div below it in your example, add the following css::

fieldset{
  margin:0px;
  padding:0px
}

you need to reset the margin and padding first to act like the div below it then add the width you want :

.inner {    
    width:60px;    
}

answered Mar 18 '13 at 13:56

ebram khalil

8,252
7
42
60

the problem is i *want* the fieldset to behave like a div by expanding to the width of its containing element. – aaronstacy Mar 18 '13 at 15:22

score 0 · Answer 4 · answered Mar 18 '13 at 14:21

0

The reason the Fieldset version is wider than the div version is because fieldset has its own default padding unless you specify otherwise.

See: http://jsfiddle.net/RDVY7/

I added this to your CSS:

fieldset {
    margin:0 ;
    padding:0 ;
}

and it fixed the problem. If you want spacing between your fieldset version and your div, just adjust the margin: element.

answered Mar 18 '13 at 14:21

Cynthia

5,273
13
42
71

in the codepen i supplied the fieldset is drastically larger than the div. it's not just a margin/padding issue, it is because the div is clamped to its containing element, and the fieldset is growing beyond it. you can see that it's much more than margin/padding by inspecting the element in firebug or chrome dev tools. – aaronstacy Mar 18 '13 at 15:24

How do i make a fieldset `display: block; overflow: auto` show a scrollbar?

4 Answers4