fieldset width 100% of parent

Question

I need to have a scrollable div inside a fieldset. My problem is that a fieldset expands to it's contents width instead of staying withing its parent.

<div class="section">
    <fieldset>
        <div class="list">
        </div>
    </fieldset>
</div>

http://jsfiddle.net/UziTech/tg5uk25L/

The two boxes should both have scrollbars on the bottom but the top one is in a fieldset so it won't control the overflow.

How do I get the fieldset to only be as wide as it's parent?

score 53 · Accepted Answer · answered Dec 26 '14 at 18:16

53

Browsers have custom css in their default stylesheet for fieldset elements.

On Chrome it has min-width: -webkit-min-content;

You could just set this rule :

.section fieldset{
    min-width: 0;
}

See fiddle:

http://jsfiddle.net/tg5uk25L/4/

Inspect the elements with Firebug, Chrome Dev Tools, aso to see the difference between the div and the fieldset elements in your stylesheet!

answered Dec 26 '14 at 18:16

Armel Larcier

15,747
7
68
89

thank you. I thought it could be something like that but I wasn't looking at the right property. – Tony Brix Dec 26 '14 at 20:20
2

Unfortunately that does not help Firefox... – Alexis Wilke Apr 29 '17 at 02:35
I thought `width` always overides `min-width` and `max-width`. Good to know. – Sablefoste Dec 12 '17 at 20:56
1

Fieldsets can be dangerous. – Tool Jun 23 '19 at 15:33
how do we fix the dumb firefox? – DATEx2 Nov 09 '20 at 06:10
@Adaptabi inspect the element, you'll see the browser's default stylesheet's styles applied to the element and it'll give you the hints you need. – Armel Larcier Nov 09 '20 at 10:24
Nice hack to resolve this buggy problem ;) – java acm Mar 05 '21 at 12:12
This is lifesaver material. – Andy Hoffman Jun 20 '21 at 07:55

score 0 · Answer 2 · answered Dec 26 '14 at 18:14

0

Just set overflow: scroll on the parent .section. That will contain the overflow and add scrollbars.

.section {
  width: 100%;
  border: 10px double;
  box-sizing: border-box;
  overflow: scroll; <----
}

FIDDLE

answered Dec 26 '14 at 18:14

jmore009

12,863
1
19
34

3

I want the fieldset to be 100% width of it's parent. I don't want it to scroll. I want the div inside the fieldset to scroll. – Tony Brix Dec 26 '14 at 20:22

score 0 · Answer 3 · answered Dec 26 '14 at 18:26

0

from your jsfiddle, perhaps you forget to add a fieldset to the second section

this is a quick fix

.section {
    width: 100%;
    border: 10px double;
    box-sizing: border-box;
    overflow-x: auto;
}

td {
    padding: 0 100px;
    border: 1px solid;
}

http://jsfiddle.net/oussamaelgoumri/meqvbjf1/

answered Dec 26 '14 at 18:26

Oussama Elgoumri

609
1
5
15

1

I purposely did that to show that it works with a div but not with a fieldset – Tony Brix Dec 26 '14 at 20:22

fieldset width 100% of parent

3 Answers3

Linked

Related