min-width¶
Свойство min-width
устанавливает минимальную ширину элемента.
Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width
, max-width
и min-width
.
Если значение ширины (width
) меньше значения min-width
, то ширина элемента принимается равной min-width
.
Блоки
- height
- width
- max-height
- max-width
- min-height
- min-width
Синтаксис¶
/* <length> value */
min-width: 3.5em;
/* <percentage> value */
min-width: 10%;
/* Keyword values */
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;
/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;
Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
auto
Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0
для других способов разметки.
max-content
Внутренняя предпочтительная ширина.
min-content
Внутренняя минимальная ширина.
fill-available
Ширина родительского блока минус горизонтальные margin
, border
, и padding
. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available
.)
fit-content
Определяет как min(max-content, max(min-content, fill-available))
.
Значение по-умолчанию:
min-width: auto;
Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>min-width</title>
<style>
.container {
min-width: 420px; /* Минимальная ширина контейнера */
}
.col1 {
background-color: #fc0; /* Цвет фона колонки */
padding: 5px; /* Поля вокруг текста */
float: left; /* Обтекание по правому краю */
width: 150px; /* Ширина левой колонки */
}
.col2 {
background-color: #c0c0c0; /* Цвет фона колонки */
padding: 5px; /* Поля вокруг текста */
width: 250px; /* Ширина правой колонки */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<div class="container">
<div class="col1">Колонка 1</div>
<div class="col2">Колонка 2</div>
</div>
</body>
</html>