表格单元格内的css 100％高度弯曲[重复]答案

【问题标题】：css 100% height flex inside table cell [duplicate]表格单元格内的css 100％高度弯曲[重复]
【发布时间】：2020-05-09 07:25:42
【问题描述】：

我有一个包含多个单元格的表格，没有关于单元格高度的任何信息，但我希望其中一个单元格（它是一个 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>

正在寻找 flexbox 解决方案，请不要将其更改为基于网格的。
我不想在<td> 中设置背景色，例如在<div> 上设置红色背景是有原因的。

【问题讨论】：

td 上的高度：0 然后高度：第一个 div 的 100%
@TemaniAfif 太棒了！您想将此添加为答案以便我接受吗？顺便说一句，这是黑客行为还是预期行为？它在所有浏览器中的工作方式都相同吗？谢谢！
这是半个黑客和预期的结果，因为 height:0 将确保百分比高度有效但不会给单元格一个等于 0 的高度，因为它在表格内......我搜索重复项这解释了这一点。
我为此搜索了很多重复项，但找不到任何内容:(
@TemaniAfif 感谢您抽出宝贵时间找到正确的问题 :-)

标签： css flexbox

【解决方案1】：

您可以将td height 设置为 0，然后将外部 div 的 height 设置为 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>

【讨论】：

感谢您的回答，但@TemaniAfif 在您回答前 6 分钟提供了与评论完全相同的内容，我已经建议他在此处添加他的回答。我们正在搜索重复的问题...
哦，我应该在他评论时测试我的解决方案。对不起。很公平。请在他回答后将他的答案标记为可接受的答案。如果你们愿意，请将我的回答标记为有用！干杯。