html - 一个或多个 标签填充父级

Question

我有一个动态填充的表。每个<td>可以有一个或多个 <div class="status">在里面。这些状态 div 根据成功或失败显示为绿色或红色。

我希望这些 div 完全填充父元素 <td> .最初，我使用的是 height: 100%; ，但是如果有多个div，那就不好了。但是，如果我删除高度选择器，条目只有一个 <div>微不足道。如下图所示。

我怎样才能保证这些单<td>只有一个 <div> 的条目完全填满了吗？

总而言之，<div class="status"> 的总和应该填写 parent <td> .谢谢!

这里还有一个 fiddle :https://jsfiddle.net/qwseoypx/

Answer 1

是这样的吗？

tr {
  display: flex;
}
td {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.successDiv, .failureDiv {
  display: flex;
  align-items: center;
  flex: 1;
}
.successDiv {
  background-color: green;
}

.failureDiv {
  background-color: red;
}

<table>
  <tr>
      <td>
          <div class="successDiv">
            Success
          </div>
      </td>
      <td>
          <div class="successDiv">
            Success
          </div>
          <div class="failureDiv">
            Failure
          </div>
      </td>
  </tr>
</table>

fiddle

https://jsfiddle.net/Hastig/qwseoypx/1/