max-width-violation.html (1471B)
1 <!DOCTYPE html> 2 <title>CSS Flexbox: max-width of inflexible items</title> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#resolve-flexible-lengths"> 4 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flexibility"> 5 <link rel="bookmark" href="https://crbug.com/617956"> 6 <meta name="assert" content="Inflexible items (flex factor 0 or flex basis violating the min/max size constraint) take max-width into account."> 7 <style> 8 .columns { 9 display: flex; 10 width: 800px; 11 } 12 13 .columns > div { 14 background: #aaa; 15 } 16 17 .column1 { 18 width: 800px; 19 overflow: auto; 20 max-width: 150px; 21 } 22 23 .column2 { 24 flex: 0.8 0 0; 25 } 26 27 .red { 28 position: absolute; 29 width: 510px; 30 background: red !important; 31 height: 10px; 32 z-index: -1; 33 } 34 35 .abspos { 36 position: absolute; 37 } 38 </style> 39 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script src="/resources/check-layout-th.js"></script> 43 44 <body onload="checkLayout('.columns')"> 45 <div id=log></div> 46 47 <p>You should see no red</p> 48 <div class="columns"> 49 <div class="red"></div> 50 <div class="column1" data-expected-width="150"> 51 Column 1 52 </div> 53 <div class="column2" data-expected-width="520"> 54 Column 2 55 </div> 56 </div> 57 58 <p>This second part is just to ensure we don't assert</p> 59 <div class="columns"> 60 <div class="column1 abspos" data-expected-width="150"> 61 Column 1 62 </div> 63 <div class="column2" data-expected-width="640"> 64 Column 2 65 </div> 66 </div>