flex-minimum-width-flex-items-014.html (1775B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: Proper min-width intrinsic size with display: flex</title> 3 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-containers"> 4 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#min-max-widths"> 5 <meta name="assert" content="This test checks that min-width intrinsic size still applies if a fixed width is set."> 6 <style> 7 .min-content { 8 width: 10px; 9 min-width: min-content; 10 outline: 2px solid; 11 display: flex; 12 flex-wrap: wrap; 13 } 14 .max-content { 15 width: 10px; 16 min-width: max-content; 17 outline: 2px solid; 18 display: flex; 19 flex-wrap: wrap; 20 } 21 .fit-content { 22 width: 10px; 23 min-width: fit-content; 24 outline: 2px solid; 25 display: flex; 26 flex-wrap: wrap; 27 } 28 .child { 29 width: 20px; 30 height: 20px; 31 background-color: pink; 32 } 33 div { 34 display: inline-block; 35 line-height: 0; 36 } 37 </style> 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 42 <body onload="checkLayout('body > div')"> 43 <div id=log></div> 44 45 <div class="min-content" data-expected-width=20> 46 <div class="child"></div><div class="child"></div> 47 </div> 48 49 <div class="max-content" data-expected-width=40> 50 <div class="child"></div><div class="child"></div> 51 </div> 52 53 <div class="fit-content" data-expected-width=40> 54 <div class="child"></div><div class="child"></div> 55 </div> 56 57 <div style="width: 30px"> 58 <div class="fit-content" data-expected-width=30> 59 <div class="child"></div><div class="child"></div> 60 </div> 61 </div> 62 63 <div style="width: 10px"> 64 <div class="fit-content" data-expected-width=20> 65 <div class="child"></div><div class="child"></div> 66 </div> 67 </div> 68 69 </body>