Размер всех элементов внутри div

Question

Я использую уменьшенную CSS начальной загрузки 4.0 на сайте приложения, который я хочу внедрить поверх другого сайта.

Вот файл: http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css

Проблема, с которой я сталкиваюсь, заключается в том, что следующие стили влияют на сайт, расположенный за моим приложением, из-за этих стилей:

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

Я попытался изменить CSS так, чтобы он предназначался только для всего внутри моего упаковочного div следующим образом:

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

Это не сработало - есть идеи?

Answer 1

Я не знаком с Bootstap 4, но текущее "мышление" заключается в том, что "сброс" размера блока определяется следующим образом:

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

Итак, если вы хотите использовать,

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

... сначала нужно изменить свойство box-sizing родительского элемента на что-то другое.

Так что-то вроде:

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

Наследование размеров блоков @ CSS-хитрости