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