CSS - Max Inline Size


Syntax and Values

The max-inline-size property follows this syntax:

max-inline-size: <length> | <percentage> | none | max-content | min-content | fit-content | fill-available;

The values for max-inline-size are:

Value Description
<length> Sets a fixed maximum width using length units like pixels (px), ems (em), or rems (rem). For example, max-inline-size: 300px; sets the maximum width to 300 pixels.
<percentage> Sets the maximum width as a percentage of the containing block's width. For example, max-inline-size: 50%; sets the maximum width to 50% of the containing block.
none The default value. It means there is no maximum width limit, and the element can expand to its natural width.
max-content Sets the maximum width to the largest width of the content within the element, without considering line breaks.
min-content Sets the maximum width to the smallest width of the content within the element, considering all possible line breaks.
fit-content Allows the element to have a maximum width that fits its content, up to a specified length or percentage. For example, css max-inline-size: fit-content(300px); sets the maximum width to the content's width, but not more than 300 pixels.
fill-available Makes the element fill the available inline space, up to its maximum content size.

If both max-inline-size and width are set for an element, the max-inline-size value will take precedence if the width value is larger.

Applying Max Inline Size

The max-inline-size property is useful for setting a maximum width for inline elements and controlling their layout. By applying max-inline-size, you can limit how wide an inline element can grow, preventing it from expanding beyond a certain size.

To set a maximum width for an inline element, you can use the max-inline-size property with a specific length or percentage value.

Example: Set max-inline-size with pixels

.inline-element {
  max-inline-size: 300px;

In this case, the inline element with the class .inline-element will have a maximum width of 300 pixels. If the content inside the element is wider than 300 pixels, it will wrap to the next line.

You can also use percentage values to set the maximum width relative to the containing block's width.

Example: Set max-inline-size with percentage

.inline-element {
  max-inline-size: 50%;

Here, the inline element will have a maximum width of 50% of its containing block's width.

By controlling the maximum width of inline elements, you can create a more organized and appealing layout. It helps prevent inline elements from stretching too wide and maintains a consistent design.

You can combine max-inline-size with other CSS properties to achieve specific layout goals. For instance, you can use max-inline-size together with min-inline-size to set a range for the width of an inline element. This allows the element to grow and shrink within a specified range based on its content.

Example: Combine max-inline-size and min-inline-size

.inline-element {
  min-inline-size: 200px;
  max-inline-size: 400px;

In this example, the inline element will have a minimum width of 200 pixels and a maximum width of 400 pixels. It will expand to fit its content within that range.

You can also use max-inline-size in combination with properties like text-align, padding, and margin to further style and position inline elements within their maximum width constraints.

By applying max-inline-size and combining it with other CSS properties, you gain more control over the layout and appearance of inline elements, enabling you to create well-structured and appealing designs.

Responsive Design

The max-inline-size property plays a big role in making responsive layouts. By using max-inline-size, you can adapt the width of elements based on different screen sizes and devices. This helps create layouts that look good and work well on desktop computers, tablets, and phones.

To use max-inline-size for responsive design, you can set different values for the property using media queries. Media queries let you apply CSS styles based on the screen size or device type.

Example: Responsive design using max-inline-size

.content {
  max-inline-size: 800px;

@media screen and (max-width: 768px) {
  .content {
    max-inline-size: 90%;

@media screen and (max-width: 480px) {
  .content {
    max-inline-size: 100%;

The .content element has a max-inline-size of 800 pixels by default. However, when the screen width is 768 pixels or less, the max-inline-size changes to 90% of the screen width. This makes sure the content fits well on smaller screens like tablets.

For even smaller screens, like phones with a width of 480 pixels or less, the max-inline-size is set to 100%. This means the content will take up the full width of the screen, providing a better reading experience on small devices.

Examples and Use Cases

Example 1: Limiting Text Width

Imagine you have a blog post with long paragraphs that stretch across the entire width of the screen. This can make the text hard to read, especially on wide screens. To fix this, you can use max-inline-size to limit the width of the text and improve readability.

Example: Limiting Text Width

.blog-post {
  max-inline-size: 800px;
  margin: 0 auto;

In this example, the .blog-post element has a max-inline-size of 800 pixels. This means the text inside the blog post will not be wider than 800 pixels. The margin: 0 auto; centers the blog post horizontally on the page.

By limiting the text width, you create a more comfortable reading experience. The text is easier to follow, and the reader's eyes don't have to travel too far from left to right. This is especially helpful for long-form content like articles or blog posts.

Example 2: Creating Responsive Buttons

When designing buttons for a website, you want them to look good and fit well on different screen sizes. However, if the button text is too long, it might overflow or break the button layout on smaller screens. To solve this, you can use max-inline-size to make the buttons responsive.

Example: Creating Responsive Buttons

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  max-inline-size: 100%;

@media screen and (min-width: 768px) {
  .button {
    max-inline-size: 200px;

In this example, the .button class has a display: inline-block; to make the button an inline-level element. The padding and background-color properties style the button's appearance. The max-inline-size: 100%; makes sure the button takes up the full width of its container on small screens.

For screens wider than 768 pixels (like on tablets or desktops), the media query sets the max-inline-size of the button to 200 pixels. This limits the button's width and prevents it from stretching too wide on larger screens.

By using max-inline-size, the button becomes responsive and adapts its width based on the screen size. On small screens, it takes up the full width for better visibility and interaction. On larger screens, it maintains a fixed width for a consistent design.

These examples show how max-inline-size can be used to control the width of elements, improve readability, and create responsive designs. By applying max-inline-size in different scenarios, you can improve the layout and user experience of your web pages.