Proprietà CSS min-width
Usa la proprietà CSS min-width per impostare la larghezza minima dell'area di contenuto di un elemento. Valori con esempi.
La proprietà min-width imposta la larghezza minima di un elemento. Impedisce che il valore della proprietà width scenda mai al di sotto del valore assegnato a min-width, indipendentemente da quanto diventi stretto lo spazio disponibile.
Questa pagina spiega cosa fa min-width, come interagisce con width e max-width, i valori che accetta (incluse le parole chiave min-content/max-content/fit-content) e il comune problema con Flexbox che min-width risolve.
Come min-width interagisce con width e max-width
Quando si usa min-width insieme alle proprietà width e max-width, min-width funge da limite inferiore. Il browser calcola la larghezza, poi la limita nell'intervallo min-width … max-width:
- Se
widthè inferiore amin-width, l'elemento viene allargato fino amin-width. - Se
widthè superiore amax-width, l'elemento viene ristretto fino amax-width.
In altre parole, min-width ha la precedenza su un valore width inferiore, e max-width ha la precedenza su un valore min-width superiore — min-width vince sempre quando i due entrano in conflitto. Questo è ciò che permette agli elementi di rimanere leggibili pur essendo responsivi: l'elemento può crescere su schermi larghi ma non collassare mai al di sotto di una dimensione utilizzabile.
Un uso pratico comune è evitare che una colonna, una card o un pulsante diventino troppo stretti all'interno di un layout Flexbox o grid, dove i figli altrimenti si restringerebbero per adattarsi.
I valori di lunghezza negativi non sono consentiti — min-width accetta solo 0 o una lunghezza/percentuale positiva.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi, eccetto elementi inline non sostituiti, righe di tabella e gruppi di righe. |
| Ereditato | No. |
| Animabile | Sì. La larghezza è animabile. |
| Versione | CSS2 |
| Sintassi DOM | object.style.minWidth = "200px"; |
Sintassi
min-width: <length> | <percentage> | min-content | max-content | fit-content | auto | initial | inherit;La proprietà accetta una lunghezza CSS (px, pt, em, rem, ecc.), una percentuale del blocco contenitore, oppure una delle parole chiave per le dimensioni intrinseche descritte nella tabella Valori qui sotto.
Esempi
Valore in percentuale
Quando min-width è una percentuale, viene risolta rispetto alla larghezza del blocco contenitore. Qui width: 10px viene ignorata perché il min-width del 70% è maggiore, quindi l'elemento viene allargato al 70% del genitore:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
div {
width: 10px;
min-width: 70%;
background-color: #1c87c9;
color: #ffffff
}
</style>
</head>
<body>
<div>The min-width of this text is defined as 70%.</div>
</body>
</html>Risultato
Valore di lunghezza fisso
In questo esempio viene assegnato un min-width di 10cm a un elemento inline-block. È confrontato con un semplice span che ha min-width: 0, in modo da vedere come il limite inferiore costringe il secondo box a rimanere largo almeno 10cm anche se il testo è breve:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title of the document</title>
<style>
span {
background-color: #ccc;
min-width: 0;
}
.example {
min-width: 10cm;
display: inline-block;
}
</style>
</head>
<body>
<h2>Min-width property example</h2>
<h3>Min-width: 0:</h3>
<span>Minimum width is set to 0.</span>
<h3>min-width: 10cm:</h3>
<span class="example">Minimum width is set to 10cm.</span>
</body>
</html>Il problema di min-width: 0 con Flexbox
Per impostazione predefinita, un elemento flex non può restringersi al di sotto delle dimensioni del suo contenuto — il suo min-width implicito è auto, non 0. Per questo motivo, parole lunghe, blocchi di codice o elementi <pre> all'interno di un contenitore flex possono andare in overflow e allungare l'intero layout invece di andare a capo o scorrere.
La soluzione è impostare esplicitamente min-width: 0 sull'elemento flex in modo che possa restringersi al di sotto delle dimensioni del suo contenuto:
.flex-item {
min-width: 0; /* allow this item to shrink below its content width */
overflow: hidden; /* or use overflow-x: auto for scrollable content */
}Consulta overflow e flex per ulteriori informazioni su come controllare il comportamento del contenuto ridotto.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
length | Definisce una larghezza minima in px, pt, cm, em, ecc. Il valore predefinito è 0. | Prova » |
% | Imposta la larghezza minima come percentuale della larghezza dell'elemento contenitore. | Prova » |
min-content | La larghezza minima che il contenuto può avere senza andare in overflow (es. la parola più lunga). | |
max-content | La larghezza che il contenuto avrebbe se non andasse mai a capo. | |
fit-content | Usa lo spazio disponibile, ma non più di max-content. | |
auto | Valore predefinito — si risolve a 0 per la maggior parte degli elementi, ma alla dimensione del contenuto per gli elementi flex. | |
initial | Fa sì che la proprietà utilizzi il suo valore predefinito (0). | Prova » |
inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
width— imposta la larghezza preferita chemin-widthlimita.max-width— imposta il limite superiore dell'intervallo di larghezza.min-height— la controparte verticale dimin-width.box-sizing— controlla se padding e bordi vengono conteggiati nella larghezza.