CSS inline-size Property

Defines the width or height of an element's block depending on its writing-mode, acting as the logical replacement for width in standard horizontal layouts.

selector { inline-size: value; }
auto The browser calculates and determines the inline size based on the default box model behavior.
<length> Defines a fixed size using standard units such as px, em, rem, or vh.
<percentage> Sets the size as a percentage of the containing block's own inline size.
min-content The smallest size the element can take without its content overflowing the box.
max-content The ideal size for the element that fits all content on a single line if possible.
fit-content(<length-percentage>) Uses the available space but clamps it between the min-content and the specified value.

Code Examples

A basic example showing a box with a logical inline size that determines its horizontal width.

<div style="inline-size: 250px; background-color: #f0f0f0; border: 2px solid #333333; padding: 15px;">
  This container uses a logical inline-size of 250px, which behaves like width in a standard horizontal layout.
</div>

An advanced example using a vertical writing mode and JavaScript to demonstrate how inline-size maps to height when the text flow changes.

<div id="dynamicBox" style="inline-size: 150px; writing-mode: vertical-rl; background-color: #007bff; color: #ffffff; padding: 20px;">
  Click to expand the logical size.
</div>
<button onclick="expandSize()">Resize Logically</button>

<script>
function expandSize() {
  const box = document.getElementById("dynamicBox");
  // In vertical mode, inline-size affects the height.
  box.style.inlineSize = "300px";
  console.log("The new logical inline-size is: " + box.style.inlineSize);
}
</script>

Pro Tip

Pair inline-size with max-inline-size: 100% to ensure your elements never burst out of their parent containers regardless of the text orientation. You can also use margin-inline: auto to horizontally center a block in a standard layout, which is much more descriptive and modern than setting left and right margins separately.

Deep Dive

In standard web development, we usually think in terms of width and height. However, as the web goes global, text doesn't always flow left-to-right. Think of inline-size as the measurement of a lane on a highway. If the highway runs West-to-East, the lane width is its horizontal measurement. If the highway runs North-to-South (vertical text), that same lane width is now its vertical measurement. By using inline-size instead of width, you are telling the browser to measure the size in the direction that text naturally flows. If the writing-mode is horizontal-tb, it affects the width. If the writing-mode is vertical-rl, it affects the height.

Best Practices

Use inline-size instead of the fixed width property when you are building layouts that need to support multiple languages or writing modes. This ensures that your buttons, cards, and containers adapt their dimensions correctly without you having to write specific CSS overrides for vertical scripts like Japanese or Chinese. It makes your components more resilient and truly global.

Common Pitfalls

A common mistake is forgetting that inline-size is relative to the writing-mode. If you set a fixed inline-size and then switch to a vertical writing mode, your element might look much taller than you expected because it is now controlling the height. Also, keep in mind that older legacy browsers like Internet Explorer do not understand logical properties, so verify your target audience's browser usage.

Accessibility

Using logical properties like inline-size improves accessibility for international users. When a user or system changes the reading direction, the layout remains logical and predictable. This prevents content from becoming cramped or overflowing in ways that might make it difficult for screen readers or users with visual impairments to follow the document flow.

Dev Data Table: inline-size property

default auto
animatable yes
inherited no
experimental no
year_intro 2015
year_standard 2021
js_syntax_1 element.style.inlineSize = "300px";
js_syntax_2 element.style.setProperty("inline-size", "300px");
js_note When manipulating this property via JavaScript, the property name must be written in camelCase as inlineSize if you are accessing it directly through the style object.
browsers { "Chrome": 57, "Edge": 79, "Firefox": 41, "Safari": 12.1, "Opera": 44, "Chrome Android": 57, "Safari on iOS": 12.2, "Samsung Internet": 7, "Opera Mobile": 43 }
results render here...