css3 - bulletproof width hack in css that will cover all including Safari? -

css3 - bulletproof width hack in css that will cover all including Safari? -

i've been using class stretch divs , inputs fit available space, without overflowing because of padding, -moz-available does.

it's working in firefox, chrome, opera.

unfortunately, safari seems browser won't along it.

.width { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: -moz-available; width: -webkit-fill-available; }

is there can add together onto create work safari?

the width: 100% declaration works fine in safari (and in other browsers). difference between width: 100% , width: available declarations former should used box-sizing: border-box prevent overflows , latter can used without box-sizing: border-box declaration. thus, class can rewritten follows , should work in safari:

.width { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box: width: 100%; }

css css3 google-chrome firefox safari