flexbox-table-flex-items-5.html (1017B)
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 flex container. 12 </title> 13 <style> 14 .container { 15 display: flex; 16 width: 300px; 17 border: 1px solid black; 18 margin-bottom: 5px; 19 } 20 .forceMaxContent > * { 21 width: max-content; 22 } 23 .container > * { 24 margin: 5px; 25 } 26 table { 27 width: 100%; 28 height: 30px; 29 table-layout: fixed; 30 background: lightgray; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="container"> 36 <div> 37 <table><td></td></table> 38 </div> 39 <div> 40 <table><td></td></table> 41 </div> 42 </div> 43 <div class="container forceMaxContent"> 44 <div> 45 <table><td></td></table> 46 </div> 47 <div> 48 <table><td></td></table> 49 </div> 50 </div> 51 </body> 52 </html>