flexbox-dyn-resize-001.html (1889B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title> 10 CSS Test: Testing how a sizing change to one flex item impacts its sibling 11 </title> 12 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 13 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm"> 14 <link rel="match" href="flexbox-dyn-resize-001-ref.html"> 15 <style> 16 .container { 17 width: 100px; 18 display: flex; 19 border: 1px solid purple; 20 margin-bottom: 15px; 21 } 22 .item { 23 margin: 2px; 24 background: lightblue; 25 } 26 .inline-box { 27 display: inline-block; 28 height: 10px; 29 width: 10px; 30 background: lightgray; 31 border: 1px solid black; 32 } 33 </style> 34 <script> 35 function go() { 36 // Make this item steal all the spare width (forcing its sibling to shrink) 37 // by giving it a huge 'width' and therefore huge flex-basis: 38 document.getElementById("change-width").style.width = "300px"; 39 40 // Make this item steal all the spare width (forcing its sibling to shrink) 41 // by giving it a pretty big flex-basis and no shrinkability: 42 document.getElementById("change-flex").style.flex = "0 0 75px" 43 } 44 </script> 45 </head> 46 <body onload="go()"> 47 <div class="container"> 48 <div class="item" id="change-width"> 49 <div class="inline-box"></div><div class="inline-box"></div> 50 </div> 51 <div class="item"> 52 <div class="inline-box"></div><div class="inline-box"></div> 53 </div> 54 </div> 55 56 <div class="container"> 57 <div class="item" id="change-flex"> 58 <div class="inline-box"></div><div class="inline-box"></div> 59 </div> 60 <div class="item"> 61 <div class="inline-box"></div><div class="inline-box"></div> 62 </div> 63 </div> 64 </body> 65 </html>