Some css styles work differently after upgrading to Chrome 60+

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>

Run codeHide result

This code works fine ( .firstBlockhas 100pxheight with y scroll) in Chrome (ium) 59, firefox, etc., but after upgrading to Chrome 60, height: 100%(any percentage height value is from 0 to 100) doesnt work correctly with div height:100%; overflow-y: scroll;in the child.

Why is this happening? Is this a chrome 60 error? How to fix it?

Answer 1

I had the same problem, my solution: set the height of the div, for example height: 20px;. If the content is larger in height than the parent, the more it will stretch in height.