How to expand a div inside a td with a height in a row that is too big

Question

I have a table where cells have a fixed height. In one of the cells there is a tall element that makes one row expand vertically. And there is another cell with a div element that is set to 100% the height of the cell. I would like to make this div element expand vertically to the cell height, further than the original set height of the cell. How can I do this?

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
}

th,
td {
  background-color: orange;
  height: 30px;
  padding: 0px;
}

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td>
      <div style="background:yellow;height:100%">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

The current example does it already in Chrome, but not in Firefox. For everyone wondering, what the sryscad wants. — Uwe, Dec 23 '22 at 20:15
A working solution is provided by the accepted answer to [How to make
fill height in Firefox](https://stackoverflow.com/a/36576083/5841606) — Uwe, Dec 23 '22 at 20:48

score 2 · Answer 1 · answered Dec 23 '22 at 21:21

For dynamic div filling 100% height is required on the parent container. To solve this, we can set the 30px as min-height and create a div CSS property to inherit the height.

table,
th,
td {
  border: 4px solid black;
  border-collapse: collapse;
  height: 100%;
}

th,
td {
  background-color: orange;
  padding: 0px;
  min-height:30px;
}
div {
height: inherit;
   }

<table>
  <tr>
    <td>
      <div style="height:50px; background:green">Tall element</div>
    </td>
    <td >
      <div style="background:yellow;">Should expand</div>
    </td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

How to expand a div inside a td with a height in a row that is too big

1 Answers1