total-min-max-violation-zero.html (1473B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Flexbox: total min/max violation of zero when flexing items</title> 4 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> 6 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flexibility"> 7 <link rel="help" href="https://github.com/servo/servo/issues/41289"> 8 <meta name="assert" content=" 9 Both targets get their target main size initialized to 300px. 10 Distributing the negative remaining free space sets them to 150px. 11 The 1st item has a min-width of 250px, that's a violation of 100px. 12 The 2nd item has a max-width of 50px, that's a violation of -100px. 13 Therefore, the total violation is 0px, thus freezing all items. 14 But the min/max constraints still need to apply. 15 So the final main sizes are 250px and 50px, respectively. 16 "> 17 18 <style> 19 #flex { 20 display: flex; 21 width: 300px; 22 height: 300px; 23 border: solid; 24 } 25 .item { 26 flex: 0 1 300px; 27 min-width: 0px; 28 } 29 </style> 30 31 <div id="flex"> 32 <div class="item" style="min-width: 250px; background: cyan" 33 data-expected-width="250"></div> 34 <div class="item" style="max-width: 50px; background: orange" 35 data-expected-width="50"></div> 36 </div> 37 38 <script src="/resources/testharness.js"></script> 39 <script src="/resources/testharnessreport.js"></script> 40 <script src="/resources/check-layout-th.js"></script> 41 <script> 42 checkLayout(".item") 43 </script>