min-inline-size

La propriété min-inline-size définit la taille minimale horizontale ou verticale d'un élément en ligne (inline) selon le mode d'écriture utilisé. Cette propriété « logique » correspond à la propriété min-width ou min-height selon la valeur utilisée pour writing-mode.

Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Si le mode d'écriture est orienté verticalement, min-inline-size fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément.  to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété min-block-size peut être utilisée pour les blocs.

/* Valeurs de longueur */
/* Type <length>       */
min-inline-size: 100px;
min-inline-size: 5em;

/* Valeurs proportionnelles à la */
/* largeur du bloc englobant     */
/* Type <percentage>             */
min-inline-size: 10%;

/* Valeurs avec un mot-clé */
min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fill-available;

/* Valeurs globales */
min-inline-size: inherit;
min-inline-size: initial;
min-inline-size: unset;

La propriété min-inline-size peut prendre les mêmes valeurs que les propriétés min-width ou min-height.

<'min-width'>

.exemple {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}

<p class="exemple">Texte d'exemple</p>

Pour contribuer à ces données de compatibilité, vous pouvez envoyer une pull request sur ce dépôt: https://github.com/mdn/browser-compat-data.

• Les propriétés physiques correspondantes
  • min-width
  • min-height
• writing-mode