| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 .min-content { | 3 .min-content { |
| 4 width: 10px; | 4 width: 10px; |
| 5 min-width: -webkit-min-content; | 5 min-width: -webkit-min-content; |
| 6 min-width: -moz-min-content; | 6 min-width: -moz-min-content; |
| 7 min-width: -ie-min-content; | 7 min-width: -ie-min-content; |
| 8 min-width: -o-min-content; | 8 min-width: -o-min-content; |
| 9 min-width: min-content; | 9 min-width: min-content; |
| 10 outline: 2px solid; | 10 outline: 2px solid; |
| 11 display: -webkit-flex; | 11 display: flex; |
| 12 -webkit-flex-wrap: wrap; | 12 flex-wrap: wrap; |
| 13 } | 13 } |
| 14 .max-content { | 14 .max-content { |
| 15 width: 10px; | 15 width: 10px; |
| 16 min-width: -webkit-max-content; | 16 min-width: -webkit-max-content; |
| 17 min-width: -moz-max-content; | 17 min-width: -moz-max-content; |
| 18 min-width: -ie-max-content; | 18 min-width: -ie-max-content; |
| 19 min-width: -o-max-content; | 19 min-width: -o-max-content; |
| 20 min-width: max-content; | 20 min-width: max-content; |
| 21 outline: 2px solid; | 21 outline: 2px solid; |
| 22 display: -webkit-flex; | 22 display: flex; |
| 23 -webkit-flex-wrap: wrap; | 23 flex-wrap: wrap; |
| 24 } | 24 } |
| 25 .fit-content { | 25 .fit-content { |
| 26 width: 10px; | 26 width: 10px; |
| 27 min-width: -webkit-fit-content; | 27 min-width: -webkit-fit-content; |
| 28 min-width: -moz-fit-content; | 28 min-width: -moz-fit-content; |
| 29 min-width: -ie-fit-content; | 29 min-width: -ie-fit-content; |
| 30 min-width: -o-fit-content; | 30 min-width: -o-fit-content; |
| 31 min-width: fit-content; | 31 min-width: fit-content; |
| 32 outline: 2px solid; | 32 outline: 2px solid; |
| 33 display: -webkit-flex; | 33 display: flex; |
| 34 -webkit-flex-wrap: wrap; | 34 flex-wrap: wrap; |
| 35 } | 35 } |
| 36 .child { | 36 .child { |
| 37 width: 20px; | 37 width: 20px; |
| 38 height: 20px; | 38 height: 20px; |
| 39 background-color: pink; | 39 background-color: pink; |
| 40 } | 40 } |
| 41 div { | 41 div { |
| 42 display: inline-block; | 42 display: inline-block; |
| 43 line-height: 0; | 43 line-height: 0; |
| 44 } | 44 } |
| (...skipping 21 matching lines...) Expand all Loading... |
| 66 </div> | 66 </div> |
| 67 </div> | 67 </div> |
| 68 | 68 |
| 69 <div style="width: 10px"> | 69 <div style="width: 10px"> |
| 70 <div class="fit-content" data-expected-width=20> | 70 <div class="fit-content" data-expected-width=20> |
| 71 <div class="child"></div><div class="child"></div> | 71 <div class="child"></div><div class="child"></div> |
| 72 </div> | 72 </div> |
| 73 </div> | 73 </div> |
| 74 | 74 |
| 75 </body> | 75 </body> |
| OLD | NEW |