min-height-table-2.html (1103B)
1 <!doctype html> 2 <title>min-height can grow a table over its intrinsic size</title> 3 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> 4 <link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> 6 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 7 <link rel="author" href="https://mozilla.org" title="Mozilla"> 8 <link rel="match" href="min-height-table-ref.html"> 9 <style> 10 :root { overflow: hidden; } 11 12 td { 13 padding: 0; 14 } 15 16 table { 17 border-spacing: 0; 18 max-height: 40px; /* Just to make sure that min trumps max, like everywhere else */ 19 min-height: 50%; 20 border: 1px solid black; 21 background: green; 22 padding: 5px; 23 } 24 25 .outer { 26 /* 300px from the ref, plus 12px for border + padding, which applies to the table wrapper box, not the grid box */ 27 height: calc((300px + 12px) * 2); 28 } 29 30 .inner { 31 width: 300px; 32 height: 5px; 33 } 34 </style> 35 <div class="outer"> 36 <table> 37 <tr> 38 <td><div class="inner"></div></td> 39 </tr> 40 </table> 41 </div>