CSS min-inline-size Property

The CSS min-inline-size property sets the minimum inline size of an element based on the writing direction, helping maintain layout consistency by controlling the minimum width or height logically instead of physically.

In horizontal writing mode, min-inline-size is equivalent to minimum width (min-width).
In vertical writing mode, it behaves like minimum height (min-height).

Syntax:

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

Property values:

The min-inline-size property accepts a variety of values to control the minimum inline size of an element, allowing fixed, relative, or automatic sizing based on content or parent elements.

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.

Examples of CSS min-inline-size Property

The following examples illustrate different uses of the CSS min-inline-size property to control the minimum inline size of elements.

Example 1:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS min-inline-size Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background-color: #e6e6e6;
        }

        h1 {
            color: green;
        }

        div {
            background-color: rgb(34, 220, 220);
            min-inline-size: 200px;
            display: inline-block;
            text-align: center;
            font-size: 18px;
            margin-left: 35px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>

    <h2>CSS | min-inline-size Property</h2>

    <div>
        A Computer Science Portal for Geeks
    </div>

</body>

</html>
<!--Driver Code Ends-->

The min-inline-size property sets the minimum width along the inline direction (horizontal in ltr, vertical in writing-mode: vertical-rl) for the <p> element.
Combined with writing-mode: vertical-rl, it ensures the text block does not shrink below 150px vertically, while background-color: cyan highlights the area.

Example 2:

HTML

<!--Driver Code Starts-->
<!DOCTYPE html>
<html>

<head>
    <title>CSS min-inline-size Property</title>
<!--Driver Code Ends-->

    <style>
        body {
            background-color: #e6e6e6;
        }

        h1 {
            color: green;
            margin: 0;
        }

        .bar {
            background-color: green;
            width: 200px;
            height: 20px;
            margin-left: 35px;
            margin-top: 25px;
        }

        .text {
            background-color: aqua;
            min-inline-size: 20px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            font-size: 18px;
            margin-left: 50px;
            margin-top: -20px;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>Geeksforgeeks</h1>

    <h2>CSS | min-inline-size Property</h2>

    <div class="bar"></div>

    <div class="text">
        A Computer Science Portal for Geeks
    </div>

</body>

</html>
<!--Driver Code Ends-->

CSS min-inline-size Property

Examples of CSS min-inline-size Property

Explore