This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

 

The min-inline-size CSS property defines the horizontal or vertical minimal size of an element's block, depending on its writing mode. It corresponds to either the min-width or the min-height property, depending on the value of 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;
min-inline-size: fill-available;

/* 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 relates to the minimum width of the element. A related property is min-block-size, which defines the other dimension of the element.

Initial value0
Applies tosame as width and height
Inheritedno
Percentagesinline-size of containing block
Mediavisual
Computed valuesame as min-width and min-height
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Values

The min-inline-size property takes the same values as the min-width and min-height properties.

Formal syntax

<'min-width'>

Example

HTML

<p class="exampleText">Example text</p>

CSS

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 5%;
  min-inline-size: 200px;
}

Specification

Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'min-inline-size' in that specification.
Editor's Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
min-inline-sizeChrome Full support 57Edge No support NoFirefox Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 41
Full support 41
No support 38 — 51
Disabled
Disabled From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 44Safari iOS No support NoSamsung Internet Android No support No
max-contentChrome Full support 57Edge No support NoFirefox Full support 66IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 66Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 5.0
min-contentChrome Full support 57Edge No support NoFirefox Full support 66IE No support NoOpera Full support 15
Prefixed
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android Full support 66Opera Android ? Safari iOS No support NoSamsung Internet Android Full support 5.0
fit-contentChrome Full support 57Edge No support NoFirefox Full support 41
Prefixed
Full support 41
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 44Safari No support NoWebView Android Full support 57Chrome Android Full support 57Edge Mobile No support NoFirefox Android ? Opera Android Full support 44Safari iOS No support NoSamsung Internet Android Full support 5.0
Alternate Name
Full support 5.0
Alternate Name
Alternate Name Uses the non-standard name: -webkit-fill-available

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Document Tags and Contributors

Last updated by: mdnwebdocs-bot,