Skip to content
Related Articles

Related Articles

CSS | min-inline-size Property
  • Last Updated : 22 Apr, 2020

The CSS min-inline-size property is used to create the minimum size of an element in the direction opposite that of the writing direction. Like if the writing direction is horizontal then min-inline-size is equivalent to min-height, and if it is in vertical mode then equal to min-width.

Syntax:

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

Property values:

  • length: It sets a fixed value defined in px, cm, pt etc. Negative values are allowed. Its default value is 0px.
  • percentage (%): It is the same as length but the size is set in term of percentage of the window size.
  • auto: It is used when it is desired that the browser determines the block-size.
  • none: It is used when you don’t want to limit on the size of the box.
  • max-content: It is used when you preferred max-width on the size of the box.
  • min-content: It is used when you preferred min-width on the size of the box.
  • fit-content: It is used when you preferred exact-width on the size of the box.
  • initial: It is used to set the value of the min-inline-size property to its default value.
  • inherit: It is used when it is desired that the element inherits the min-inline-size property of its parent as its own.
  • unset: It is used unset the default min-inline-size.

Below examples illustrate the min-inline-size property in CSS:
Example 1:




<!DOCTYPE html> 
<html
  
<head
    <title>CSS | min-inline-size Property</title
    <style
        h1 { 
            color: green; 
        
          
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        
          
        .one { 
            position: relative; 
            min-inline-size: 10px; 
            background-color: cyan; 
        
    </style
</head
  
<body
    <center
        <h1>Geeksforgeeks</h1
        <b>CSS | min-inline-size Property</b
        <br
        <br
        <div
            <p class="one"
                A Computer Science Portal for Geeks 
            </p
        </div
    </center
</body
  
</html>                     

Output:



Example 2:




<!DOCTYPE html> 
<html
  
<head
    <title>CSS | min-inline-size Property</title
    <style
        h1 { 
            color: green; 
        
          
        div { 
            background-color: green; 
            width: 200px; 
            height: 20px; 
        
          
        .one { 
            position: relative; 
            writing-mode: vertical-rl;
            min-inline-size: 150px; 
            background-color: cyan; 
        
    </style
</head
  
<body
    <center
        <h1>Geeksforgeeks</h1
        <b>CSS | min-inline-size Property</b
        <br
        <br
        <div
            <p class="one"
                A Computer Science Portal for Geeks 
            </p
        </div
    </center
</body
  
</html>                                 

Output:

Supported Browsers: The browsers supported by min-inline-size property are listed below:

  • Firefox
  • Google Chrome
  • Edge
  • Opera

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size

My Personal Notes arrow_drop_up
Recommended Articles
Page :