OLD | NEW |
1 /* | 1 /* |
2 Take every possible line break so the box width is the width of largest | 2 Take every possible line break so the box width is the width of largest |
3 unbreakable line box. | 3 unbreakable line box. |
4 */ | 4 */ |
5 .min-content { | 5 .min-content { |
| 6 /* Webkit, but not actually implemented outside deprecated flexbox */ |
| 7 width: min-intrinsic; |
6 width: -webkit-min-content; | 8 width: -webkit-min-content; |
7 width: -moz-min-content; | 9 width: -moz-min-content; |
8 width: min-content; | 10 width: min-content; |
9 } | 11 } |
10 | 12 |
11 .max-content { | 13 .max-content { |
12 width: -webkit-max-content; | 14 width: -webkit-max-content; |
13 width: -moz-max-content; | 15 width: -moz-max-content; |
14 width: max-content; | 16 width: max-content; |
15 } | 17 } |
16 | 18 |
17 /* | 19 /* |
18 Identical to auto except for elements with an instrinsic width like an | 20 Identical to auto except for elements with an instrinsic width like an |
19 img where this overrides the intrinsic width to get regular block "auto". | 21 img where this overrides the intrinsic width to get regular block "auto". |
20 */ | 22 */ |
21 .fill-available { | 23 .fill-available { |
22 width: -webkit-fill-available; | 24 width: -webkit-fill-available; |
23 /* Firefox is missing the fill- prefix because they followed an older spec *
/ | 25 /* Firefox is missing the fill- prefix because they followed an older spec *
/ |
24 width: -moz-available; | 26 width: -moz-available; |
25 width: fill-available; | 27 width: fill-available; |
26 } | 28 } |
27 | 29 |
28 /* | 30 /* |
29 Shrink wrap just like floating. | 31 Shrink wrap just like floating. |
30 max(min-content, min(max-content, fill-available)) | 32 max(min-content, min(max-content, fill-available)) |
31 */ | 33 */ |
32 .fit-content { | 34 .fit-content { |
| 35 /* Webkit, but only outside a deprecated flexbox. */ |
| 36 width: intrinsic; |
33 width: -webkit-fit-content; | 37 width: -webkit-fit-content; |
34 width: -moz-fit-content; | 38 width: -moz-fit-content; |
35 width: fit-content; | 39 width: fit-content; |
36 } | 40 } |
37 | 41 |
38 .max-width-min-content { | 42 .max-width-min-content { |
39 max-width: -webkit-min-content; | 43 max-width: -webkit-min-content; |
40 max-width: -moz-min-content; | 44 max-width: -moz-min-content; |
41 max-width: min-content; | 45 max-width: min-content; |
42 } | 46 } |
43 | 47 |
44 .max-width-max-content { | 48 .max-width-max-content { |
45 max-width: -webkit-max-content; | 49 max-width: -webkit-max-content; |
46 max-width: -moz-max-content; | 50 max-width: -moz-max-content; |
47 max-width: max-content; | 51 max-width: max-content; |
48 } | 52 } |
49 | 53 |
50 .max-width-fill-available { | 54 .max-width-fill-available { |
51 max-width: -webkit-fill-available; | 55 max-width: -webkit-fill-available; |
52 max-width: -moz-available; | 56 max-width: -moz-available; |
53 max-width: fill-available; | 57 max-width: fill-available; |
54 } | 58 } |
55 | 59 |
56 .max-width-fit-content { | 60 .max-width-fit-content { |
| 61 max-width: intrinsic; |
57 max-width: -webkit-fit-content; | 62 max-width: -webkit-fit-content; |
58 max-width: -moz-fit-content; | 63 max-width: -moz-fit-content; |
59 max-width: fit-content; | 64 max-width: fit-content; |
60 } | 65 } |
61 | 66 |
62 .min-width-min-content { | 67 .min-width-min-content { |
63 min-width: -webkit-min-content; | 68 min-width: -webkit-min-content; |
64 min-width: -moz-min-content; | 69 min-width: -moz-min-content; |
65 min-width: min-content; | 70 min-width: min-content; |
66 } | 71 } |
67 | 72 |
68 .min-width-max-content { | 73 .min-width-max-content { |
69 min-width: -webkit-max-content; | 74 min-width: -webkit-max-content; |
70 min-width: -moz-max-content; | 75 min-width: -moz-max-content; |
71 min-width: max-content; | 76 min-width: max-content; |
72 } | 77 } |
73 | 78 |
74 .min-width-fill-available { | 79 .min-width-fill-available { |
75 min-width: -webkit-fill-available; | 80 min-width: -webkit-fill-available; |
76 min-width: -moz-available; | 81 min-width: -moz-available; |
77 min-width: fill-available; | 82 min-width: fill-available; |
78 } | 83 } |
79 | 84 |
80 .min-width-fit-content { | 85 .min-width-fit-content { |
| 86 min-width: intrinsic; |
81 min-width: -webkit-fit-content; | 87 min-width: -webkit-fit-content; |
82 min-width: -moz-fit-content; | 88 min-width: -moz-fit-content; |
83 min-width: fit-content; | 89 min-width: fit-content; |
84 } | 90 } |
OLD | NEW |