html - 升级到 Chrome 60+ 后，某些 css 样式的工作方式有所不同

Question

.tbodyBugHeight {
  height: 100%;
}
.tbodyBugHeight .tdBugHeight {
  height: 100%;
}
.tbodyBugHeight .tdBugHeight .firstBlock {
  height: 100%;
  width: 100px;
  overflow-y: scroll;
  border: 1px solid green;
}
.tbodyBugHeight .secondBlock {
  height: 100px;
  width: 100px;
  border: 1px solid red;
}

<table>
  <tbody class="tbodyBugHeight">
    <tr>
      <td class="tdBugHeight">
        <div class="firstBlock">This text is hidden in Chrome 60</div>
      </td>
      <td>
        <div class="secondBlock"></div>
      </td>
    </tr>
  </tbody>
</table>

此代码在 Chrome(ium) 59、firefox 等上运行良好(.firstBlock 具有 100px 高度和 y 滚动)，但在更新到 Chrome 60 后， height: 100%(从 0 到 100 的任何百分比高度值)在 div height:100% 中无法正常工作； overflow-y: 滚动; 在 child 中。

为什么会这样？这是 chrome 60 的错误吗？如何解决？

Answer 1

我遇到了同样的问题，我的解决办法是:设置高度为div，比如height: 20px;。如果内容的高度比父级大，它会在高度上拉伸(stretch)得更多。