Some css styles work differently after upgrading to Chrome 60+

Viewed 351

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

This code works fine (.firstBlock has 100px height with y scroll) on Chrome(ium) 59, firefox etc but after update to Chrome 60, height: 100% (any percent height value from 0 to 100) doesnt work correct with div height:100%; overflow-y: scroll; in child.

ch60bug

Why it happends? Is this a chrome 60 bug? How to fix it?

1 Answers
Related