CSS max-inline-size Property

The max-inline-size property specifies the maximum size an element can have along the inline direction. In most horizontal writing modes, it works similarly to max-width.

Limits the maximum inline size of an element and prevents it from becoming too wide.
Behaves like max-width in horizontal layouts while adapting automatically to different writing modes.
Supports length values, percentages, and keywords, making it useful for responsive layouts and improved content readability.

Syntax:

max-inline-size: auto | value | initial |inherit;

Property values

This property allows you to control an element’s size using fixed lengths, percentages, content-based sizing, or automatic browser-calculated sizing.

<length> : Specifies a fixed maximum size using units such as px, em, or rem.
<percentage> : Sets the maximum size as a percentage of the containing block's size.
max-content : Allows the element to expand to its maximum content size.
min-content : Constrains the element to its minimum content size.
fit-content : Resizes the element to fit its content within available space and constraints.
fill-available : Makes the element fill the available space within its containing block.
auto : Lets the browser determine the maximum size automatically.

HTML

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

<head>
    <title>CSS max-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: 30px;
        }

        .text {
            background-color: aqua;
            max-inline-size: 20px;
            margin-left: 130px;
            margin-top: -20px;
            font-size: 18px;
            line-height: 1;
        }
    </style>

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

<body>
    <h1>Geeksforgeeks</h1>

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

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

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

</body>

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

Example : Another implementation of the CSS max-inline-size Property.

HTML

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

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

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

        h1 {
            color: green;
        }

        div {
            background-color: rgb(34, 220, 220);
            max-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 | max-inline-size Property</h2>

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

</body>

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

CSS max-inline-size Property

Property values

Explore