Intrinsic & Extrinsic Sizing

Allows for the heights and widths to be specified in intrinsic values using the `max-content`, `min-content`, `fit-content` and `stretch` (formerly `fill`) properties.

W3C Working Draft: https://www.w3.org/TR/css3-sizing/

Usage: 92% + 5.48% = 97.5%

Support summary

IE: Not supported
Edge: Not supported, notes for version 79₃, notes for version 94₄
Firefox: partial since 3, prefixed since 3, notes for version 3₁, notes for version 66₂
Chrome: prefixed since 22, notes for version 22₃, notes for version 46₃, notes for version 94₄
Safari: 16.0, partial since 6.1, prefixed since 6.1, notes for version 6.1₁, notes for version 9₃, notes for version 11₃
Opera: prefixed since 15, notes for version 15₃, notes for version 33₃, notes for version 34₃, notes for version 35₃, notes for version 95₄
Safari on iOS: 16.0, partial since 7.0-7.1, prefixed since 7.0-7.1, notes for version 7.0-7.1₁, notes for version 9.0-9.2₃, notes for version 14.0-14.4₃
Opera Mini: Not supported
Android Browser: prefixed since 4.4, notes for version 4.4₃, notes for version 124₄
Blackberry Browser: prefixed since 10, notes for version 10₃
Opera Mobile: Not supported, notes for version 80₄
Chrome for Android: Not supported, notes for version 124₄
Firefox for Android: partial since 125, notes for version 125₂
IE Mobile: Not supported
UC Browser for Android: Not supported, notes for version 15.5₃
Samsung Internet: prefixed since 4, notes for version 4₃, notes for version 5.0-5.4₃, notes for version 17.0₄
QQ Browser: Not supported, notes for version 14.9₃
Baidu Browser: Not supported, notes for version 13.52₃
KaiOS Browser: partial since 2.5, prefixed since 2.5, notes for version 2.5₁, notes for version 3.0-3.1₂

Notes

Prefixes are on the values, not the property names (e.g. -webkit-min-content) Older webkit browsers also support the unofficial `intrinsic` value which acts the same as `max-content`.

Firefox does not support the `height`/`min-height`/`max-height` properties, only `width`. See test case, Firefox bug. ↑
Firefox supports the `-moz-available` keyword rather than `stretch`. Firefox bug. ↑
Does not support the `flex-basis` property. See specs, Blink bug, Firefox bug. ↑
Chrome does not yet unprefix `stretch` (aka `fill`/`fill-available`), because the CSSWG is not ready for that yet. See Chromium bug. ↑
While still being affected by note 1, it is only for `-moz-fit-content` and `-moz-available`. ↑

Full support table

IE

5.5	6	7	8	9	10	11
n	n	n	n	n	n	n

Edge

12	13	14	15	16	17	18	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124
n	n	n	n	n	n	n	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Firefox

2	3	3.5	3.6	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127	128
n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a	a

Chrome

4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	59	60	61	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109	110	111	112	113	114	115	116	117	118	119	120	121	122	123	124	125	126	127
n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	n	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari

3.1	3.2	4	5	5.1	6	6.1	7	7.1	8	9	9.1	10	10.1	11	11.1	12	12.1	13	13.1	14	14.1	15	15.1	15.2-15.3	15.4	15.5	15.6	16.0	16.1	16.2	16.3	16.4	16.5	16.6	17.0	17.1	17.2	17.3	17.4	17.5	TP
n	n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	a	a	a	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera

9	9.5-9.6	10.0-10.1	10.5	10.6	11	11.1	11.5	11.6	12	12.1	15	16	17	18	19	20	21	22	23	24	25	26	27	28	29	30	31	32	33	34	35	36	37	38	39	40	41	42	43	44	45	46	47	48	49	50	51	52	53	54	55	56	57	58	60	62	63	64	65	66	67	68	69	70	71	72	73	74	75	76	77	78	79	80	81	82	83	84	85	86	87	88	89	90	91	92	93	94	95	96	97	98	99	100	101	102	103	104	105	106	107	108	109
n	n	n	n	n	n	n	n	n	n	n	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

Safari on iOS

3.2	4.0-4.1	4.2-4.3	5.0-5.1	6.0-6.1	7.0-7.1	8	8.1-8.4	9.0-9.2	9.3	10.0-10.2	10.3	11.0-11.2	11.3-11.4	12.0-12.1	12.2-12.5	13.0-13.1	13.2	13.3	13.4-13.7	14.0-14.4	14.5-14.8	15.0-15.1	15.2-15.3	15.4	15.5	15.6-15.8	16.0	16.1	16.2	16.3	16.4	16.5	16.6-16.7	17.0	17.1	17.2	17.3	17.4	17.5
n	n	n	n	n	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a,x	a	a	a	a	a	a	a	y	y	y	y	y	y	y	y	y	y	y	y	y

Opera Mini

all
n

Android Browser

2.1	2.2	2.3	3	4	4.1	4.2-4.3	4.4	4.4.3-4.4.4	124
n	n	n	n	n	n	n	y,x	y,x	y

Blackberry Browser

7	10
n	y,x

Opera Mobile

10	11	11.1	11.5	12	12.1	80
n	n	n	n	n	n	y

Chrome for Android

124
y

Firefox for Android

125
a

IE Mobile

10	11
n	n

UC Browser for Android

15.5
y

Samsung Internet

4	5.0-5.4	6.2-6.4	7.2-7.4	8.2	9.2	10.1	11.1-11.2	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20	21	22	23	24
y,x	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y	y

QQ Browser

14.9
y

Baidu Browser

13.52
y

KaiOS Browser

2.5	3.0-3.1
a,x	a

y = supported
a = partially supported, see notes
x = supported with a prefix, e.g. moz, webkit
p = supported with a polyfill
d = available but disabled by default; the feature need to be enabled in about:config, chrome://flags, etc.
n = not supported
u = unknown/untested

Back to list