multiline-shrink-to-fit.html (2144B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: multiline column flexboxes and shrink-to-fit.</title> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#intrinsic-sizes"> 5 <link rel="match" href="reference/multiline-shrink-to-fit-ref.html"> 6 <meta name="assert" content="This test ensures that multiline column flexboxes shrink-to-fit works properly."/> 7 <style> 8 .flexbox { 9 display: flex; 10 background-color: #aaa; 11 position: relative; 12 flex-wrap: wrap; 13 flex-direction: column; 14 float: left; 15 align-content: flex-start; 16 } 17 .flexbox > * { 18 flex: none; 19 } 20 .flexbox :nth-child(1) { 21 background-color: lightblue; 22 } 23 .flexbox :nth-child(2) { 24 background-color: lightgreen; 25 } 26 .flexbox :nth-child(3) { 27 background-color: pink; 28 } 29 .flexbox :nth-child(4) { 30 background-color: yellow; 31 } 32 </style> 33 <body> 34 35 <div class="flexbox"> 36 <div style="width: 100px; height: 20px"></div> 37 <div style="width: 100px; height: 10px"></div> 38 <div style="width: 100px; height: 10px"></div> 39 <div style="width: 100px; height: 20px"></div> 40 </div> 41 <p style="clear:left">The grey background should be 100px wide.</p> 42 43 <div class="flexbox" style="height: 30px"> 44 <div style="width: 100px; height: 20px"></div> 45 <div style="width: 100px; height: 10px"></div> 46 <div style="width: 100px; height: 10px"></div> 47 <div style="width: 100px; height: 20px"></div> 48 </div> 49 <p style="clear:left">The grey background should be 100px wide.</p> 50 51 <div style="width: 150px"> 52 <div class="flexbox"> 53 <div style="width: 100px; height: 20px"></div> 54 <div style="width: 100px; height: 10px"></div> 55 <div style="width: 100px; height: 10px"></div> 56 <div style="width: 100px; height: 20px"></div> 57 </div> 58 </div> 59 <p style="clear:left">The grey background should be 100px wide.</p> 60 61 <div style="width: 150px"> 62 <div class="flexbox" style="height: 35px"> 63 <div style="width: 100px; height: 20px"></div> 64 <div style="width: 100px; height: 10px"></div> 65 <div style="width: 100px; height: 10px"></div> 66 <div style="width: 100px; height: 20px"></div> 67 </div> 68 </div> 69 <p style="clear:left">The grey background should be 150px wide and 5px should 70 stick out the bottom.</p> 71 72 </body> 73 </html>