CSS - max-inline-size Property

Previous
Quiz
Next

CSS max-inline-size property sets the maximum 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

max-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 max-inline-size of the element using length units (e.g. px, em, rem etc.)
percentage It sets the max-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 Max Inline Size Property

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

Max 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;
         max-inline-size: auto;
         display: inline-block;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-inline-size property
   </h2>
   <h4>
      max-inline-size: auto
   </h4>
   <div class="container">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides,
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
</body>
</html>

Max 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, it will overflow. This is shown in the following example.

Example

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

      .size1 {
         max-inline-size: 160px;
      }

      .size2 {
         max-inline-size: 6.5em;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-inline-size property
   </h2>
   <h4>
      max-inline-size: 160px
   </h4>
   <div class="container size1">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides,
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
   <br/>
   <h4>
      max-inline-size: 6.5em
   </h4>
   <div class="container size2">
      <p>
         TutorialsPoint offers comprehensive online 
         tutorials across various subjects, including 
         programming, web development, and data science. 
         It provides accessible, step-by-step guides,
         practical examples, and interactive learning 
         resources for learners of all levels.
      </p>
   </div>
</body>
</html>

Max 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, it will overflow. This is shown in the following example.

Example

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

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

      .size1 {
         max-inline-size: 45%;
      }

      .size2 {
         max-inline-size: 55%;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-inline-size property
   </h2>
   <h4>
      max-inline-size: 45% (of the size 
      of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size1">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides,
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      max-inline-size: 55% (of the size 
      of the containing element)
   </h4>
   <div class="outer-container">
      <div class="container size2">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides,
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

Max Inline Size Property with Writing Mode

The max-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: 150px;
      }

      .container {
         display: inline-block;
         background-color: lightgreen;
         max-inline-size: 65%;
      }

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

      .vertical {
         writing-mode: vertical-rl;
      }
   </style>
</head>
<body>
   <h2>
      CSS max-inline-size property
   </h2>
   <h4>
      max-inline-size: 65% (of the size of the 
      containing element); writing-mode: horizontal-lr;
   </h4>
   <div class="outer-container">
      <div class="container horizontal">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides,
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
   <br/>
   <h4>
      max-inline-size: 65% (of the size of the 
      containing element); writing-mode: vertical-rl;
   </h4>
   <div class="outer-container">
      <div class="container vertical">
         <p>
            TutorialsPoint offers comprehensive online 
            tutorials across various subjects, including 
            programming, web development, and data science. 
            It provides accessible, step-by-step guides,
            practical examples, and interactive learning 
            resources for learners of all levels.
         </p>
      </div>
   </div>
</body>
</html>

Supported Browsers

Property Chrome Edge Firefox Safari Opera
max-inline-size 57.0 79.0 41.0 12.1 44.0
css_reference.htm
Print Page
Previous
Next
Advertisements