CSS - min-inline-size Property

CSS min-inline-size property specifies the minimum horizontal or vertical size of an element's block, determined by its writing mode and equivalent to either min-height and min-width based on the writing mode value.

Possible Values

The min-inline-size property accepts the same values as min-height and min-width.

Applies To

Same as width and height.

Syntax

<length> Values

min-inline-size: 100px;
min-inline-size: 5em;

<percentage> Values

min-inline-size: 10%;

Keyword Values

min-inline-size: max-content;
min-inline-size: min-content;
min-inline-size: fit-content;
min-inline-size: fit-content(20em);

The min-inline-size property sets the minimum width for horizontal writing modes and the minimum height for vertical writing modes, respectively. A companion property, min-block-size defines the other dimension.

CSS min-inline-size - <length> Value

The following example demonstrates the min-inline-size: 200px property sets the minimum width of the inline element to the 200px −

<html>
<head>
<style>
   .box {
      background-color: greenyellow;
      border: 3px solid red;
      display: inline-block;
      min-inline-size: 200px;
   }
</style>
</head>
<body>
   <p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - <percentage> Value

The following example demonstrates the min-inline-size: 30% property sets the minimum width of the inline element to the 30% −

<html>
<head>
<style>
   .box {
      background-color: greenyellow;
      border: 3px solid red;
      display: inline-block;
      min-inline-size: 30%;
   }
</style>
</head>
<body>
   <p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - max-content Value

The following example demonstrates the min-inline-size: max-content property allows the inline element to expand horizontally to fit its content −

<html>
<head>
<style>
   .box {
      background-color: greenyellow;
      border: 3px solid red;
      display: inline-block;
      min-inline-size: max-content;
   }
</style>
</head>
<body>
   <p class="box">CSS min-inline-size</p>
</body>
</html>

CSS min-inline-size - With Vertical Text

The following example demonstrates the max-inline-size property with writing-modes to display text in vertical direction −

<html>
<head>
<style>
   div {
      background-color: greenyellow;
      border: 2px solid blue;
      margin: 10px;
      padding: 5px;
      min-inline-size: 150px;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div>
      <h3>CSS min-inline-size with writing-mode: vertical-rl.</h3>
   </div>
</body>
</html>
Advertisements