| <!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> |
