Свойство min-width устанавливает минимальную ширину элемента. Обычно задается для элемента с плавающей шириной (ширина задана в процентах или не задана вообще, а элемент по ширине раздвигается своим содержимым). Если ширина элемента задана в процентах - при уменьшении окна браузера она будет уменьшаться пока не достигнет значения min-width.

Синтаксис

селектор {
	max-width: CSS единицы | проценты |  none | inherit;
}

Значения

Значение Описание
CSS единицы Устанавливает минимальную ширину в заданных единицах.
Проценты Минимальная ширина элемента вычисляется в зависимости от ширины родительского элемента.
none Минимальная ширина не задана.
inherit Наследует значение родителя.

Значение по умолчанию: none.

Примеры

Пример

В данном примере ширина составляет процент от ширины родителя - в нашем случае это body. Уменьшите окно браузера по ширине, и контейнер тоже уменьшится, чтобы подстроиться под ширину окна браузера. Однако он будет уменьшаться только до величины, определенной в min-width, это 400px. Как только контейнер достигнет этой ширины - он перестанет уменьшаться:

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

Посмотреть пример.

Пример

В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше 900px и меньше 400px:

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

Посмотреть пример.