The inline-size property sets the size of an element along the inline axis. In a horizontal writing mode it behaves like width. In a vertical writing mode it behaves like height.
It is not inherited. The initial value is auto. Pair it with block-size for the other axis, and with writing-mode when text direction changes.
Prefer inline-size over width when a layout must stay correct for both horizontal and vertical writing modes.
inline-size: auto | <length> | <percentage> | min-content | max-content | fit-content | initial | inherit;Values match width / height. Newer keywords like stretch have limited support.
| Value | Description | Try it |
|---|---|---|
auto | Default. Browser sizes the box from content | Try it |
<length> | Fixed size such as 200px, 12rem, or 40vw | Try it |
<percentage> | Percent of the containing block’s inline size | Try it |
with writing-mode | In vertical mode, inline-size maps to physical height | Try it |
initial | Resets to auto | Try it |
inherit | Takes the parent’s inline-size | Try it |
inline-sizeThink in writing-mode terms: size the inline axis, not “always left–right.”
inline-size where you would reach for width in a horizontal layout.auto, a length, or a percentage of the containing block.min-inline-size / max-inline-size when you need floors or caps.writing-mode if the page may switch to vertical text.| Piece | Required? | Role |
|---|---|---|
| Block or sized box | Yes | Same applicability rules as width |
inline-size value | Yes | auto, length, percentage, or keyword |
| Containing block size | For % | Percentage uses the parent’s inline size |
writing-mode | Optional | Chooses whether inline maps to width or height |
Change inline-size on the sample box. In the default horizontal mode, this acts like width.
Each snippet focuses on inline-size. Use Try It Yourself for a live editor.
Set an exact inline size. In horizontal mode this is like width.
<style>
div {
inline-size: 200px;
}
</style>
<div>200px inline</div>200px sets the inline-axis size.rem, em, or vw the same way.Size a child as half of the parent’s inline size.
<style>
.parent {
inline-size: 320px;
}
.child {
inline-size: 50%;
}
</style>
<div class="parent">
<div class="child">Half of parent</div>
</div>320px defines the containing block.50% resolves to 160px here.width: 50%.With vertical text, inline-size maps to physical height.
<style>
div {
writing-mode: vertical-rl;
inline-size: 120px;
}
</style>
<div>Inline axis</div>writing-mode: vertical-rl rotates the axes.120px controls physical height, not width.Most confusion comes from mixing logical and physical sizing.
In vertical writing modes, inline-size maps to height. Do not assume it always means left–right size.
Setting both width and inline-size on the same element can produce unexpected results. Prefer one system.
Percentages resolve against the containing block’s inline size. In vertical mode that parent measure is physical height.
min- / max-inline-size overrideThose properties can stop a box from shrinking or growing past a limit, just like min-width / max-width.
box-sizing still appliesWith border-box, padding and border count inside the size. With content-box, they add outside it.
inline-size is a browser layout property. Node.js, Deno, and Bun do not apply it.
Widely available across modern browsers since ~2020. Same value set as width/height; stretch remains limited.
Bottom line: Safe for modern sites. Prefer logical sizing when writing-mode flexibility matters. Skip Internet Explorer.
auto, lengths, and percentages (same as width).auto. Not inherited.block-size for fully logical box sizing.One line: inline-size is the logical version of width — it follows the writing mode’s inline axis.
Learn the shorthand for top, right, bottom, and left offsets.
8 people found this page helpful