Блог

Я использовал этот класс для правильного растягивания divs и входных данных, чтобы они соответствовали доступному пространству, без переполнения из-за заполнения, как -moz-available это делает.

Он работает в Firefox, Chrome, Opera.

К сожалению, Safari, похоже, единственный браузер, который с этим не справляется.

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

Могу ли я что-нибудь добавить к этому, чтобы заставить его работать с Safari?

Объявление width: 100% отлично работает в Safari (и в других браузерах). Разница между объявлениями width: 100% и width: available заключается в том, что первое следует использовать с box-sizing: border-box для предотвращения переполнения, а последнее можно использовать без объявления box-sizing: border-box . Таким образом, ваш класс можно переписать следующим образом, и он должен работать в Safari:

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