flexbox-table-flex-items-4-ref.html (969B)
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 Reference Case 11 </title> 12 <style> 13 .container { 14 display: flex; 15 flex-wrap: wrap; 16 width: 300px; 17 border: 1px solid black; 18 font: 12px monospace; 19 margin-bottom: 5px; 20 } 21 .container > * { 22 flex: 1 400px; /* Bigger than flex container; 23 should linewrap and cooperatively shrink to fit. */ 24 padding: 5px 10px; 25 } 26 table { 27 width: 100%; 28 background: lightgray; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="container"> 34 <div> 35 <table><td>a</td></table> 36 </div> 37 <div> 38 <table><td>b</td></table> 39 </div> 40 </div> 41 <div class="container"> 42 <div> 43 <table><td>a</td></table> 44 </div> 45 <div> 46 <table><td>b</td></table> 47 </div> 48 </div> 49 </body> 50 </html>