<!doctype html> <title>min-height can grow a table over its intrinsic size</title> <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1651530"> <link rel="help" href="https://drafts.csswg.org/css-tables/#computing-the-table-height"> <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5336"> <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> <link rel="author" href="https://mozilla.org" title="Mozilla"> <link rel="match" href="min-height-table-ref.html"> <style> :root { overflow: hidden; } td { padding: 0; } table { border-spacing: 0; max-height: 40px; /* Just to make sure that min trumps max, like everywhere else */ min-height: 50%; border: 1px solid black; background: green; padding: 5px; } .outer { /* 300px from the ref, plus 12px for border + padding, which applies to the table wrapper box, not the grid box */ height: calc((300px + 12px) * 2); } .inner { width: 300px; height: 5px; } </style> <div class="outer"> <table> <tr> <td><div class="inner"></div></td> </tr> </table> </div>