| 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 |