CSS中如何让flex子元素在表格单元格内占据100%高度？

Question

我有一个表格，其中有多个单元格，但没有关于单元格高度的任何信息，我想让其中一个单元格（一个flexbox容器）的内容高度占据该单元格的100％：

<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. 寻找一个flexbox的解决方案，请不要改成基于网格布局。
2. 我不想在<td>中设置背景颜色，这里在例子中为<div>设置红色背景有其原因。

- Dekel

---

如果在 td 上设置 height:0，则第一个 div 的高度应设置为 height:100%。 - Temani Afif

@TemaniAfif 太棒了！您是否想将此作为答案添加，以便我可以接受它？顺便问一下，这是黑客行为还是预期行为？在所有浏览器中都能以相同的方式工作吗？谢谢！ - Dekel

这是一种半个hack的方法，旨在确保百分比高度起作用，但不会使单元格的高度等于0，因为它位于表格内...我正在寻找解释这一点的重复内容。 - Temani Afif

我在这个问题上进行了很多重复搜索，但是没有找到任何答案 :( - Dekel

@TemaniAfif 感谢您花时间找到正确的问题 :-) - Dekel

Answer 1

您可以将 td 的高度设置为 0，然后将外部 div 的高度设置为 100%。请查看以下代码：

<table border="1">
  <tr>
    <td style="height: 0">
      <div style="height: 100%">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>

- Pedro Coelho

---

谢谢您的回答，但是@TemaniAfif在您回答之前6分钟就已经在评论中提供了完全相同的答案，我已经建议他在这里添加他的答案。我们正在搜索重复的问题... - Dekel

哦，他发表评论时我应该测试我的解决方案。对不起。好的。如果他回答了，请将他的答案标记为可接受的答案。如果你们想的话，也可以将我的答案标记为有用！干杯。 - Pedro Coelho