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 |