CSS max-inline-size Property Last Updated : 07 Feb, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The CSS max-inline-size Property sets the maximum width or height of an element depending on its writing mode. It's particularly useful for controlling the size of inline elements like text or images within a container. For horizontal writing modes (like left-to-right languages), it controls the maximum width, while for vertical writing modes, it controls the maximum height. This property helps maintain layout consistency and prevents content overflow. Syntaxmax-inline-size: auto | value | initial |inherit;Property valuesProperty ValueDescriptions<length>Specifies a fixed length (e.g., pixels or em).<percentage>Specifies a percentage of the containing block's size.max-contentAllows the element to expand to its maximum content size.min-contentConstrains the element to its minimum content size.fit-contentResizes the element to fit its content within specified constraints.fill-availableFills the available space within the containing block.autoIt lets the browser determine the maximum size automatically.Example 1: Below examples illustrate the max-inline-size property in CSS. HTML <!DOCTYPE html> <html> <head> <title>CSS max-inline-size Property</title> <style> h1 { color: green; } div { background-color: lightblue; border: 2px solid green; max-inline-size: 100px; display: inline-block; } </style> </head> <body> <h1>GeeksforGeeks</h1> <div> <p> GeeksforGeeks is an online study platform for the geeks. </p> </div> </body> </html> Output: Example 2: Another implementation of the CSS max-inline-size Property. HTML <!DOCTYPE html> <html> <head> <title>CSS | max-inline-size Property</title> <style> body { text-align: center; } h1 { color: green; } div { background-color: green; width: 200px; height: 20px; } .one { position: relative; max-inline-size: auto; background-color: cyan; } </style> </head> <body> <h1>Geeksforgeeks</h1> <b>CSS | max-inline-size Property</b> <br><br> <div> <p class="one"> A Computer Science Portal for Geeks </p> </div> </body> </html> Output: Supported BrowsersThe browsers supported by max-inline-size property are listed below: Firefox 41Google Chrome 57Edge 79Opera 44Safari 12.1 Comment More infoAdvertise with us Next Article CSS | max-block-size Property S skyridetim Follow Improve Article Tags : Web Technologies CSS CSS-Properties Similar Reads CSS | min-inline-size Property 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- 2 min read CSS | min-inline-size Property 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- 2 min read CSS scroll-margin-inline Property The scroll-margin-inline property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-inline-start and scroll-margin-inline-end property. The selection of the start and end sides depends upon the writing mode. The s 2 min read CSS | max-block-size Property The CSS max-block-size property is used to create the maximum size of an element in the direction opposite that of the writing direction. Like if the writing direction is horizontal then max-block-size is equivalent to max-height, and if it is in vertical mode then equal to max-width. Syntax: max-bl 2 min read CSS | max-block-size Property The CSS max-block-size property is used to create the maximum size of an element in the direction opposite that of the writing direction. Like if the writing direction is horizontal then max-block-size is equivalent to max-height, and if it is in vertical mode then equal to max-width. Syntax: max-bl 2 min read CSS | padding-inline Property The padding-inline property in CSS is used to define the logical inline start and end padding of an element. This property helps to place padding depending on the element’s writing mode, directionality, and text orientation. Syntax: padding-inline: length|percentage|auto|inherit|initial|unset; Prope 2 min read Like