Propriedade Min-Width
Última atualização: 2026-09-13
min-width Propriedade Min-Width
A propriedade min-width define a largura mínima de um elemento, evitando que ele seja comprimido até ficar muito pequeno quando o contêiner afunila. Seu valor padrão, 0, significa que não há limite inferior. É frequentemente usada junto com width e max-width e é uma ferramenta importante para proteger a legibilidade em layouts responsivos.
| Categoria | |
|---|---|
| Valor Inicial | 0 |
| Herdado | Não |
| Aplica-se A | non-replaced |
| Tipo de Animação | length |
| Versão CSS | CSS2 |
| Status | Padrão |
📝 Sintaxe
min-width: auto | <length> | <percentage> | min-content | max-content | fit-content;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
0 | Palavra-chave | Sem largura mínima. |
<length> | Tipo | Uma largura mínima fixa. |
<percentage> | Tipo | Uma porcentagem relativa ao bloco que a contém. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| min-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O min-width tem precedência sobre width e max-width, forçando o elemento a nunca encolher abaixo desse valor.
❓ Perguntas Frequentes
QSe min-width e width forem definidos, qual vence?
AO min-width tem prioridade maior que o width. Quando width é menor que min-width, o elemento é renderizado em min-width; quando é maior, é renderizado em width. O min-width pode até sobrescrever max-width. A ordem de restrição de tamanho do CSS é min-width primeiro, depois max-width, depois width, então o min-width é o mais forte dos três e protege o conteúdo de ser esmagado em telas estreitas. A mesma precedência se aplica a alturas com min-height.
QPor que os itens flex precisam de min-width:0 para encolher?
APorque o min-width padrão de um item flex é auto, que se comporta como a largura mínima do conteúdo, por exemplo a palavra mais longa. Quando o contêiner fica sem espaço, o item se recusa a encolher abaixo disso, causando transbordamento ou um layout quebrado. Definir min-width:0 permite que o item encolha livremente, o que é comum para truncamento de texto com text-overflow:ellipsis e para listas divididas igualmente dentro de layouts flex.
QQual é a diferença entre min-width e max-width?
AO min-width define o limite inferior da largura de um elemento, impedindo que ele seja espremido mais estreito que o valor definido; o max-width define o limite superior, impedindo que ele seja esticado mais largo que o valor definido. Podem ser usados juntos, e o navegador resolve a largura final usando a precedência min-width, depois max-width, depois width. Juntos eles definem a faixa de largura em layouts responsivos.
QA porcentagem do min-width é relativa a quê?
AA porcentagem é calculada em relação à largura do bloco que a contém. Por exemplo, min-width:50% significa que o elemento nunca pode ser mais estreito que metade da largura da área de conteúdo do pai. Observe que, para elementos posicionados absolutamente, a referência é a padding box do ancestral posicionado mais próximo; portanto, verifique qual bloco que a contém se aplica antes de confiar na proporção calculada. Em fluxo normal, esse bloco que a contém é quase sempre a área de conteúdo do pai.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade Max-Width
Limite a largura máxima do elemento.
Tutorial de Layout Flexbox
Entenda o papel do min-width em layouts flex.
