css 100% height flex inside table cell [duplicate]

Question

I have a table with multiple cells, don't have any information about the height of the cells but I want the height of the content of one of the cells (which is a flexbox container) to take 100% of the cell's height:

<table border="1">
  <tr>
    <td>
      <div style="height: 152px">some content</div>
    </td>
    <td style="vertical-align: top">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>
        

1. Looking for a flexbox solution, please don't change it to grid-based.
2. I don't want to set the background color in the <td>, there is a reason for setting the red-background on the <div> for the example.

Answer 1

You may set the td height to 0 and then the outer div's height to 100%. Check the following code:

<table border="1">
  <tr>
    <td style="height: 0">
      <div style="height: 100%">some content</div>
    </td>
    <td style="vertical-align: top; height: 0;">
      <div style="display: flex; flex-wrap: wrap;">
        <div style="height: 100%; min-height: 100%; flex: 1; background: red">
          This should take 100% height
        </div>
      </div>
    </td>
  </tr>
</table>