Open In App

CSS | min-inline-size Property

Last Updated : 29 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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: 

HTML




<!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: 

HTML




<!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 41+
  • Google Chrome 57+
  • Edge 79+
  • Opera 44+
  • Safari 12.1+

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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads