CSS – Max Inline Size


CSS – max-inline-size Property



”;


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

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


Possible Values

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


Applies To

Same as width and height.


Syntax

<length> Values


max-inline-size: 300px;
max-inline-size: 25em;


<percentage> Values


max-inline-size: 40%;


Keyword Values


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


CSS max-inline-size – <length> Value

The following example demonstrates the max-inline-size: 300px property sets the maximum width of the element to the 300px −


<html>
<head>
<style>
   div {
      background-color: greenyellow;
      border: 3px solid red;
      max-inline-size: 300px;
   }
</style>
</head>
<body>
   <div>
      <h2>Tutorialspoint</h2>
      <h4>CSS max-inline-size: 300px</h4>
   </div>
</body>
</html>


CSS max-inline-size – <percentage> Value

The following example demonstrates the max-inline-size: 80% property sets the maximum width of the element to the 80% −


<html>
<head>
<style>
   div {
      background-color: greenyellow;
      border: 3px solid red;
      max-inline-size: 80%;
   }
</style>
</head>
<body>
   <div>
      <h2>Tutorialspoint</h2>
      <h4>CSS max-inline-size: 80%</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>


CSS max-inline-size – <max-content> Value

The following example demonstrates the max-inline-size: max-content property allowed the width of the div element to expand horizontally to fit the content −


<html>
<head>
<style>
   div {
      background-color: greenyellow;
      border: 3px solid red;
      max-inline-size: max-content;
   }
</style>
</head>
<body>
   <div>
      <h2>Tutorialspoint</h2>
      <h4>CSS max-inline-size: max-content</h4>
   </div>
</body>
</html>


CSS max-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;
      block-size: 100%;
      max-inline-size: 100px;
      writing-mode: vertical-rl;
   }
</style>
</head>
<body>
   <div >
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   </div>
</body>
</html>

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *