表格单元格内的css 100％高度 flex

Question

这个问题在这里已经有了答案:





height: 100% for <div> inside <div> with display: table-cell

(7 个回答)



Percentage Height HTML 5/CSS

(6 个回答)



100% height div inside table-cell not working on Firefox

(1 个回答)


去年关闭。




我有一个包含多个单元格的表格，没有关于单元格高度的任何信息，但我希望其中一个单元格(它是一个 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>上设置红色背景是有原因的例如。

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