Propriedade min-width

A propriedade min-width define a largura mínima de um elemento. Os valores para a propriedade podem ser quaisquer unidades de medida ou a palavra-chave none, que significa a ausência de um valor.

Geralmente é definida para um elemento com largura fluida (a largura é definida em porcentagem ou não é definida, e o elemento se expande em largura devido ao seu conteúdo). Se a largura do elemento for definida em porcentagem - ao reduzir a janela do navegador, ela diminuirá até atingir o valor de min-width.

Sintaxe

seletor {
	max-width: valor;
}

Exemplo

Neste exemplo, a largura é uma porcentagem da largura do elemento pai. Reduza a largura da janela do navegador, e o contêiner também diminuirá para se adaptar à largura da janela do navegador. No entanto, ele diminuirá apenas até o valor definido em min-width, que é 400px. Quando o contêiner atingir essa largura - ele parará de diminuir:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	height: 300px;
	border: 1px solid black;
}

Exemplo

Neste exemplo, a largura do contêiner é limitada em ambos os lados: ele não poderá ficar maior que 900px e menor que 400px:

<div id="elem"></div>

#elem {
	width: 70%;
	min-width: 400px;
	max-width: 900px;
	height: 100px;
	border: 1px solid black;
}

Veja também

a propriedade max-width,
que define a largura máxima de um elemento
a propriedade max-height,
que define a altura máxima de um elemento
a propriedade min-height,
que define a altura mínima de um elemento