CSS - min-inline-size Property

Quiz

CSS min-inline-size property sets the minimum inline size of an element. The direction of the inline is determined by the writing-mode property. The property has no effect, if the content fits well within the inline size of the element.

Syntax

min-inline-size: auto | length | percentage | initial | inherit;

Property Values

Value	Description
auto	No width limit is set with this value. Default.
length	It sets the min-inline-size of the element using length units (e.g. px, em, rem etc.)
percentage	It sets the min-inline-size of the element using percentage value relative to the size of the containing element.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS Min Inline Size Property

The following examples explain the min-inline-size property with different values.

Min Inline Size Property with Auto Value

To not set any specific limit on the inline-size of an element, we use the auto value. The size of the element depends on the length of the content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         min-inline-size: auto;
         display: inline-block;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: auto
   </h4>
   <div class="container">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
</body>
</html>

Min Inline Size Property with Length Values

To set the inline size of an element, we can specify the size using length units (e.g. px, em, rem etc.). The specified size will be applied to the element. If the content is greater than the size of the element, the element will grow to accomodate the content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .container {
         background-color: lightgreen;
         margin: 10px;
         display: inline-block;
      }

      .size1 {
         min-inline-size: 400px;
      }

      .size2 {
         min-inline-size: 30em;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 400px
   </h4>
   <div class="container size1">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
   <br/>
   <h4>
      min-inline-size: 30em
   </h4>
   <div class="container size2">
      <p>
        TutorialsPoint offers extensive online courses.
      </p>
   </div>
</body>
</html>

Min Inline Size Property with Percentage Values

To set the inline size of an element, we can specify the size using percentage value (e.g. 10%) relative to the size of the containing element. The specified size will be applied to the element. If the content is greater than the size of the element, the element will grow to accomodate the content. This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 100px;
      }

      .container {
         display: inline-block;
         background-color: lightgreen;
      }

      .size1 {
         min-inline-size: 50%;
      }

      .size2 {
         min-inline-size: 75%;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 50% (of the 
      size of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size1">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-inline-size: 75% (of the 
      size of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size2">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
</body>
</html>

Min Inline Size Property with Writing Mode

The min-inline-size property can be used in combination with the writing-mode property which determines the inline direction. In horizontal-mode, the inline-size grows from left to right. In vertical-mode, the inline-size grows from top to bottom (or bottom to top). This is shown in the following example.

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      .outer-container {
         height: 100px;
      }

      .container {
         display: inline-block;
         background-color: lightgreen;
         min-inline-size: 55%;
      }

      .horizontal {
         writing-mode: horizontal-lr;
      }

      .vertical {
         writing-mode: vertical-lr;
      }
   </style>
</head>
<body>
   <h2>
      CSS min-inline-size property
   </h2>
   <h4>
      min-inline-size: 55% (of the size of the 
      containing element); writing-mode: horizontal-lr;
   </h4>
   <div class="outer-container">
      <div class="container horizontal">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      min-inline-size: 55% (of the size of the 
      containing element); writing-mode: vertical-lr;
   </h4>
   <div class="outer-container">
      <div class="container vertical">
         <p>
            TutorialsPoint offers extensive online courses.
         </p>
      </div>
   </div>
</body>
</html>

Supported Browsers

Property
min-inline-size	57.0	79.0	41.0	12.1	44.0

css_reference.htm

Print Page