CSS max-block-size
La proprietà CSS3 max-block-size imposta la dimensione massima del blocco
La proprietà max-block-size definisce la dimensione massima che un elemento può occupare nel flusso del contenuto (tipicamente l'altezza verticale). È utile quando si desidera limitare la crescita di un contenitore, pur mantenendo la possibilità di adattarsi al contenuto fino a un certo punto.
Sintassi
Significato dei valori principali:
-
auto: L'elemento può crescere in base al contenuto senza limite massimo (valore predefinito). -
lunghezza: Imposta un limite massimo specifico alla dimensione del blocco, ad esempio200px,10em,50%. -
fit-content: Limita la dimensione massima al contenuto disponibile, evitando overflow. -
min-content/max-content: Determinano la dimensione in base al contenuto minimo o massimo richiesto.
Esempio proprietà: max-block-size
Codice Esempio: max-block-size
.max-block-size-example {
max-block-size: 150px;
overflow: auto;
border: 2px solid #50a14f;
padding: 10px;
font-size: 18px;
background-color: #f6f8fa;
width: 80%;
margin: 0 auto;
}
Contenuto Esempio: max-block-size
Esempio di utilizzo di max-block-size
In questo esempio, max-block-size viene utilizzato per limitare l'altezza massima di un elemento, facendo comparire una barra di scorrimento quando il contenuto eccede lo spazio disponibile:
CSS e HTML per l'esempio con max-block-size:
<style>
.max-block-size-example {
max-block-size: 150px;
overflow: auto;
border: 2px solid #50a14f;
padding: 10px;
font-size: 18px;
background-color: #f6f8fa;
width: 80%;
margin: 0 auto;
}
</style>
<div class="max-block-size-example">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.214
