Certos elementos HTML, como a div ou a p, esticarão para ocupar a largura total disponível por padrão. Se você der a eles um horizontal margin, isso não causará uma barra de rolagem horizontal. Este é um comportamento padrão incrivelmente útil. Claro, muitos outros elementos não têm largura total por padrão. Vamos dar uma olhada em algumas instâncias em que width:100% é útil, antes de olhar para uma alternativa mais nova.
As dimensões padrão de uma imagem são definidas pelo tamanho intrínseco da imagem incorporada. É necessário dar a imagens grandes um width de 100% para evitar estouro.
Quer que um button ou um select elemento tenha largura total? Você precisará aplicar width: 100%.
Se você adicionar um left ou right margin a qualquer elemento com um width definido como 100%, isso causará estouro, resultando em uma barra de rolagem horizontal.
Isso já poderia ser resolvido usando calc para subtrair o valor combinado de ambas as margens. Então, se você tivesse um left e right margin de 24px, o seguinte funcionaria:
button {
width: calc(100% - 48px);
margin-inline: 24px;
}Se você decidir depois atualizar o design visual alterando o tamanho das margens, também precisará alterar o valor na calc função. Agora há uma abordagem mais simples que permite evitar a matemática completamente: a stretch palavra-chave.
button {
width: stretch;
margin-inline: 24px;
}Essa propriedade permite que outros elementos adotem o autocomportamento de divs e elementos de parágrafo: estiquem-se para preencher a largura disponível e, ao mesmo tempo, permitam o uso tranquilo das margens.
A stretch palavra-chave também é especificada para funcionar ao especificar height e flex-basis.
Suporte ao navegador
stretch é uma das poucas propriedades CSS que ainda requer um prefixo vendor. O código a seguir deve funcionar em todos os navegadores:
width: -webkit-fill-available;
width: -moz-available;
width: stretch;Esta propriedade está finalmente sendo padronizada e deve estar disponível sem prefixo em breve.
Por enquanto, apenas width é suportado por todos os navegadores. Usar -moz-available ou -webkit-fill-available para min-width ou max-width não é suportado pelo Firefox ou Safari. -moz-available não funciona para height no Firefox. O Chrome não suporta -webkit-fill-available como um valor para flex-basis.
Nota lateral sobrewidth: auto
Se você já teve dificuldade para entender o que width: autosignifica, entender stretch já é meio caminho andado. automapeará para fit-content elementos como controles de formulário e mapeará para stretch elementos como divs.