inline-size - CSS: Cascading Style Sheets
the inline-size css property defines the horizontal or vertical size of an element's block, depending on its writing mode.
... syntax /* <length> values */ inline-size: 300px; inline-size: 25em; /* <percentage> values */ inline-size: 75%; /* keyword values */ inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; /* global values */ inline-size: inherit; inline-size: initial; inline-size: unset; if the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element.
... values the inline-size property takes the same values as the width and height properties.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.

max-inline-size - CSS: Cascading Style Sheets
the max-inline-size css property defines the horizontal or vertical maximum size of an element's block depending on its writing mode.
...if the writing mode is vertically oriented, the value of max-inline-size relates to the maximal height of the element, otherwise it relates to the maximal width of the element.
... syntax /* <length> values */ max-inline-size: 300px; max-inline-size: 25em; /* <percentage> values */ max-inline-size: 75%; /* keyword values */ max-inline-size: auto; max-inline-size: max-content; max-inline-size: min-content; max-inline-size: fit-content(20em); /* global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset; values the max-inline-size property takes the same values as the max-width and max-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.

min-inline-size - CSS: Cascading Style Sheets
the min-inline-size css property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode.
... syntax /* <length> values */ min-inline-size: 100px; min-inline-size: 5em; /* <percentage> values */ min-inline-size: 10%; /* keyword values */ min-inline-size: max-content; min-inline-size: min-content; min-inline-size: fit-content(20em); /* global values */ min-inline-size: inherit; min-inline-size: initial; min-inline-size: unset; if the writing mode is vertically oriented, the value of min-inline-size relates to the minimum height of the element; otherwise, it ...
... values the min-inline-size property takes the same values as the min-width and min-height properties.
... formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.

Logical properties for sizing - CSS: Cascading Style Sheets
these mappings assume that you are in a horizontal-tb writing mode, such as english or arabic, in which case width would be mapped to inline-size.
... if you were in a vertical writing mode then inline-size would be mapped to height.
... logical property physical property inline-size width block-size height min-inline-size min-width min-block-size min-height max-inline-size max-width max-block-size max-height width and height example the logical mappings for width and height are inline-size, which sets the length in the inline dimension and block-size, which sets the length in the block dimension.
...And 5 more matches

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
if instead of the width property we use the logical property inline-size, the component now works the same way no matter which writing mode it is displayed using.
...some of the properties are essentially mappings from the physical versions, for example inline-size for width or margin-inline-start rather than margin-left.
...for example you could set a width, test for inline-size and, if it is supported, set the width to auto and the inline-size to the original width value.

Handling different text directions - Learn web development
the property mapped to width when in a horizontal writing mode is called inline-size — it refers to the size in the inline dimension.
...you can see how this works in the example below where we have replaced width with inline-size.

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
therefore, we have new properties of block-size and inline-size.
... if we give our block an inline-size of 100px, it doesn’t matter whether we are in a horizontal or a vertical writing mode, inline-size will always mean the size in the inline direction.

Animatable CSS properties - CSS: Cascading Style Sheets
column-rule column-rule-color column-rule-width column-width columns filter flex flex-basis flex-grow flex-shrink font font-size font-size-adjust font-stretch font-variation-settings font-weight gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows height inline-size inset inset-block inset-block-end inset-block-start inset-inline inset-inline-end inset-inline-start left letter-spacing line-clamp line-height margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top mask mask-bord...
...er mask-position mask-size max-block-size max-height max-inline-size max-lines max-width min-block-size min-height min-inline-size min-width object-position offset offset-anchor offset-distance offset-path offset-position offset-rotate opacity order outline outline-color outline-offset outline-width padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top perspective perspective-origin right rotate row-gap scale scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-m...

CSS reference - CSS: Cascading Style Sheets
d-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>image()image-orientationimage-renderingimage-set()@importin:in-range:indeterminateinheritinitialinline-sizeinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert()isolationjjustify-contentjustify-itemsjustify-selfkkhz@keyframesl:lang:last-child:last-of-typeleader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-heightlinear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal()...
...gin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-top::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmmsn@namespacenegative (@counter-style):not:nth-child:nth-last-child:nth-last-of-type:nth-of-type<number>oobject-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-rotate:only-child:only...

max-block-size - CSS: Cascading Style Sheets
the other dimension's maximum length is specified using the max-inline-size property.
... any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum "height" of the content (even though this may not be a vertical value) and max-inline-size to set the maximum "width" of the content (although this may instead be vertical rather than horizontal).

SVG documentation index - SVG: Scalable Vector Graphics
it defines the start and end points of a line of text as used by the text-anchor and inline-size properties.
... 218 text-anchor svg, svg attribute the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.

Overflowing content - Learn web development
you can constrain the size of these boxes by assigning values of width and height (or inline-size and block-size).

Flow Layout and Overflow - CSS: Cascading Style Sheets
flow relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout to the physical dimensions of the screen.

CSS Logical Properties and Values - CSS: Cascading Style Sheets
reference properties for sizing block-size inline-size max-block-size max-inline-size min-block-size min-inline-size properties for margins, borders and padding border-block border-block-color border-block-end border-block-end-color border-block-end-style border-block-end-width border-block-start border-block-start-color border-block-start-style border-block-start-width border-block-style border-block-width border-color (logica...

block-size - CSS: Cascading Style Sheets
a related property is inline-size, which defines the other dimension of the element.