How to override CSS Box Sizing for just one area on page?

I have the following CSS inside my Twitter Bootstrap file:

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

It is causing a problem with my TinyMCE editor, mainly the resizing of the textarea. Anyway if I remove the above code all is good, but obviously I need it in place cause otherwise the rest of Bootstrap breaks.

So how do I override the above for just TinyMCE? I tried this:

.tinymce-editor,
.tinymce-editor:before,
.tinymce-editor:after {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

But no luck. .tinymce-editor happens to be the div that my editor is inside.