Box sizing all elements within div

Question

I'm using the bootstrap 4.0 minified css on an application site I want to inject over the top of another site.

The issue I'm having is the following styling is affecting the site sitting behind my application because of these styles:

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

I've tried to modify the CSS so it targets only everything within my wrapping div like so:

.prefix-wrapper * {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

This didn't work - any ideas?

It has to inherit someting different...right? So where is it supposed to inherit it from? — Paulie_D, Feb 03 '16 at 16:15
Then it's not logical...if you don't **change** the box-sizing on the parent, the children can't inherit it. — Paulie_D, Feb 03 '16 at 16:23
Right now I understand, so my prefix styling needs to have "border-box" instead of inherit, this makes sense. — Filth, Feb 03 '16 at 16:26

score 0 · Answer 1 · answered Feb 03 '16 at 16:33

I'm not familiar with Bootstap 4 but the current "thinking" is that the box-sizing 'reset' is formed like so:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

So, if you wish to use,

.prefix-wrapper * {
        -webkit-box-sizing: inherit;
        box-sizing: inherit;
    }

...you first have to change the box-sizing property on the parent to something different.

So something like:

.prefix-wrapper {
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }

1 Answers1