CSS min-inline-size Set Minimum Size Along Inline Axis

min-inline-size: <length> | <percentage> | auto | none | min-content | max-content | fit-content | inherit | initial | unset;

min-inline-size =
  <'min-width'>

<'min-width'> =
  auto                                      /* Single bar: exactly one of the entities must be present */
  <length-percentage [0,∞]>                 /* Single bar: exactly one of the entities must be present */
  min-content                               /* Single bar: exactly one of the entities must be present */
  max-content                               /* Single bar: exactly one of the entities must be present */
  fit-content( <length-percentage [0,∞]> )  /* Single bar: exactly one of the entities must be present */
  <calc-size()>                             /* Single bar: exactly one of the entities must be present */
  <anchor-size()>

<length-percentage> =
  [<length>]WebsiteUrl     /* Single bar: exactly one of the entities must be present */
  [<percentage>]WebsiteUrl

<calc-size()> =
  calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
  anchor-size( [[ <anchor-element> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
  [<intrinsic-size-keyword>]WebsiteUrl /* Single bar: exactly one of the entities must be present */
  <calc-size()>                             /* Single bar: exactly one of the entities must be present */
  any                                       /* Single bar: exactly one of the entities must be present */
  <calc-sum>

<calc-sum> =
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<anchor-element> =
  [<dashed-ident>]WebsiteUrl

<anchor-size> =
  width        /* Single bar: exactly one of the entities must be present */
  height       /* Single bar: exactly one of the entities must be present */
  block        /* Single bar: exactly one of the entities must be present */
  inline       /* Single bar: exactly one of the entities must be present */
  self-block   /* Single bar: exactly one of the entities must be present */
  self-inline

<calc-product> =
  <calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
  [<number>]WebsiteUrl        /* Single bar: exactly one of the entities must be present */
  [<dimension>]WebsiteUrl     /* Single bar: exactly one of the entities must be present */
  [<percentage>]WebsiteUrl    /* Single bar: exactly one of the entities must be present */
  <calc-keyword>                                /* Single bar: exactly one of the entities must be present */
  ( <calc-sum> )

<calc-keyword> =
  e          /* Single bar: exactly one of the entities must be present */
  pi         /* Single bar: exactly one of the entities must be present */
  infinity   /* Single bar: exactly one of the entities must be present */
  -infinity  /* Single bar: exactly one of the entities must be present */
  NaN

<div class="horizontal-text">
  This is some horizontal text.
</div>

.horizontal-text {
  writing-mode: horizontal-tb;
  min-inline-size: 200px;
  border: 1px solid black;
}

<div class="vertical-text">
  This is some vertical text.
</div>

.vertical-text {
  writing-mode: vertical-lr;
  min-inline-size: 100px;
  border: 1px solid black;
}

<div class="percentage-text">
  This is some text with a percentage-based minimum size.
</div>

.percentage-text {
  min-inline-size: 50%;
  border: 1px solid black;
}

<div class="keyword-text">
  This is some text with a keyword-based minimum size.
</div>

.keyword-text {
  min-inline-size: min-content;
  border: 1px solid black;
}