flexbox-table-flex-items-4.html (1090B)
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 that tables with "table-layout:fixed" can shrink 11 from their default flex base size to fit their multi-line flex container. 12 </title> 13 <style> 14 .container { 15 display: flex; 16 flex-wrap: wrap; 17 width: 300px; 18 border: 1px solid black; 19 font: 12px monospace; 20 margin-bottom: 5px; 21 } 22 .forceMaxContent > * { 23 width: max-content; 24 } 25 .container > * { 26 display: flex; 27 padding: 5px 10px; 28 } 29 table { 30 width: 100%; 31 table-layout: fixed; 32 background: lightgray; 33 } 34 </style> 35 </head> 36 <body> 37 <div class="container"> 38 <div> 39 <table><td>a</td></table> 40 </div> 41 <div> 42 <table><td>b</td></table> 43 </div> 44 </div> 45 <div class="container forceMaxContent"> 46 <div> 47 <table><td>a</td></table> 48 </div> 49 <div> 50 <table><td>b</td></table> 51 </div> 52 </div> 53 </body> 54 </html>