CSS min-width — мінімальна ширина елемента

Властивість min-width використовується, щоб встановити мінімальну ширину елемента.

Це запобігає значенню властивісті width ставати меншим за значення min-width.

Значення ширини елемента розраховується в залежності від встановлених значень властивостей width, max-width і min-width.

Ширина елементу може дорівнювати значенню заданому для min-wіdth, коли значення min-wіdth більше за значення max-wіdth або width.

Дані з таблиці слід розуміти так, якщо ширина елемента (width) менше за значення min-width, то ширина стане рівною значенню min-width.

правити

Загальний опис

правити

Нотатка

Властвість min-width перевизначає властивості max-width та width.

автор: Svitlana правити

Нотатка

Якщо вікно браузера по ширині стає менше заданої мінімальної ширини елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

автор: Svitlana правити

Нотатка

Ключові слова впливають на розрахунок ширини й висоти елементу(й не залежать від значення властивості box-sizing). Це не стосується до значень у одиницях довжини або процентах.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

min-width: length|initial|inherit;

Властивість min-width може отримувати 3 значень:

length

Як значення приймаються пікселі (px), відсотки (%) і інші одиниці виміру, прийняті в CSS. Від`ємні значення не допускаються.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	7

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<button class="min">ok</button>
<button>ok</button>

.min {
    min-width: 150px;
}

<p><b>min-width: auto</b> — типово</p>
<div class="row">
    <div class="cell"><span class="txt">Дуже довга назва товару, яка нікуди не переноситься</span></div>
    <div class="side">180 грн</div>
</div>

<p><b>min-width: 0</b> — виправлено</p>
<div class="row">
    <div class="cell fix"><span class="txt">Дуже довга назва товару, яка нікуди не переноситься</span></div>
    <div class="side">180 грн</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 16px;
}

b {
    font-family: monospace;
}

.row {
    display: flex;
    gap: 8px;
    width: 320px;
    border: 2px solid #d33;
    padding: 6px;
    margin-bottom: 20px;
}

.cell {
    flex: 1;
    background: #eef;
    padding: 6px;
}

.fix {
    min-width: 0;
}

.txt {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side {
    background: #efe;
    padding: 6px;
    white-space: nowrap;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>min-width</strong>.</p>

<p>Вона встановлює мінімальну ширину для блоку.</p>

<strong>min-width: </strong>
<input type="number" class="input" id="num" value="440" min="0" step="10">px
<strong>;</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
  min-width: 440px;
  transition: all .15s ease-in;
  display: inline-block;
}

.box p,
.box input{
  max-width: 240px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('min-width', num + 'px'));
}));

<div class="info">
	<p>За допомогою властивості <code>min-width</code> ми можемо обмежувати мінімальне можливе значення ширини для блоку.</p>
	<p>Наприклад, ширина цього блоку (сірого кольору) має дорівнювати ширині його вмісту, але за допомогою вище вказаної властивості, ми це можемо змінити (в нашому прикладі для блоку задана мінімальна ширина <em>85vw</em>).</p>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	background-color: #b7b7b7;
	min-width: 85vw;
	display: inline-block;
}

.info p {
	background-color: gold;
	padding: 4px 6px;
	max-width: 65vw;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

<div class="block">
  <p class="green">Цей блок займає у ширину не менший за 50 пікселів! </p>
  <p>А цей за 100 пікселів!</p>
</div>

.block {
  background-color: #eee;
  padding: 16px;
  min-width: 100px;
}

.block > p.green {
  height: 50px;
  min-width: 50px;
  padding: 12px;
  background-color: greenyellow;
}