Prevent child from increasing width of parent

Question

I have a very wide table inside a div, which in turn is inside a fieldset which is inside a form which is inside an article.

This wide table results in the div and the fieldset to increase their width. The form does not increase the width.

I want to show a horizontal scrollbar for the div. But this doesn't work, because it has the same width as the table.

How can I prevent the div from increasing its width?
Please know that the height of the table is dynamic and changes based on user interactions.
I would like to achieve this without JS.

Fiddle demonstrating my problem.

If you think this is a duplicate to an existing question, please test the solution first with my specific setup, thanks. I tested quite a few and none seemed to work in my scenario.

score 2 · Accepted Answer · edited May 23 '17 at 12:22

2

With a deeper look, I noticed that the fieldset element has a min-width attribute inherited directly from the web-kit (at least in Chrome). It appears that it goes against what you want to do.

You can solve your issue by specifying for the fieldset element:

CSS

fieldset { min-width:0px; }

Check this FIDDLE

UPDATE: A fix that also works for Firefox

From an explanation of the fieldset behaviour here (thanks @Pangloss for catching this!):

CSS

fieldset {
    min-width: 0px;
}

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

New FIDDLE

edited May 23 '17 at 12:22

Community

1
1

answered Oct 11 '15 at 21:55

Frederik.L

5,522
2
29
41

It does work for Webkit but does not work for Firefox. – Stickers Oct 11 '15 at 21:56
@Pangloss Thanks, I will check for that an edit my answer. – Frederik.L Oct 11 '15 at 21:58
Very interesting indeed, tried all but Firefox just doesn't like it. – Stickers Oct 11 '15 at 22:01
For IE it also works. Is this a bug in Firefox? – Daniel Hilgarth Oct 11 '15 at 22:03
I doubt it, those replaced elements just hard for styling. – Stickers Oct 11 '15 at 22:06
Using `display: table-cell;` on the fieldset fixes it for Firefox. But this breaks it for IE. – Daniel Hilgarth Oct 11 '15 at 22:09
Also try `table-row`, `table-column` etc. works for Fx, not sure IE. – Stickers Oct 11 '15 at 22:16
2

Guys see this - http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content – Stickers Oct 11 '15 at 22:17
@DanielHilgarth Which version of IE does it breaks? I cannot reproduce on IE on my end with both `min-width` and `display` – Frederik.L Oct 11 '15 at 22:17
@Pangloss: Good job finding that gem. It also supports my observation of it breaking IE. – Daniel Hilgarth Oct 11 '15 at 22:20
@Frederik.L IE 11.0.9600.18036. Reproduction: http://jsfiddle.net/kd9f23dp/ visual: http://screencast.com/t/y1uWjiGibX – Daniel Hilgarth Oct 11 '15 at 22:22
OK, based on that excellent SO answer, I found a way to make it work in all browsers. See fiddle: http://jsfiddle.net/v6tt1j4m/ @Frederik.L: If you update your answer with these details, I will accept it. Please also link to the other excellent answer – Daniel Hilgarth Oct 11 '15 at 22:23
@Pangloss Good catch! Updated my answer with consideration of that fix. – Frederik.L Oct 11 '15 at 22:23
1

@DanielHilgarth Already did :D – Frederik.L Oct 11 '15 at 22:24
Thanks guys, that was awesome! :-) – Daniel Hilgarth Oct 11 '15 at 22:24
Cheers, have a good one. – Stickers Oct 11 '15 at 22:25

Prevent child from increasing width of parent

1 Answers1