max-height in chrome is ignored while align-items: baseline

[RudManusachi]

Platform

Windows 10 - Chrome 60.0.3112.113 (64bit)

Description

In Chrome max-height: 0 is ignored when align-items: baseline applied to grid.

Steps to reproduce

Create page with the following HTML/CSS.

<div class="grid hidden">
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
</div>

<div class="grid hidden baseline">
  <div>&nbsp;</div>
  <div>BASELINE</div>
  <div>&nbsp;</div>
</div>

.baseline{
  align-items: baseline;
}

.hidden{
  max-height: 0px;
}

.grid{
  margin: 20px;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
}

.grid > div{
  background: #ff6b6b;
  color: white;
}

.grid, .grid > div{
  outline: 1px dashed grey;
}

Because of class .hidden, which applies max-height: 0, both grids are supposed to be hidden, but one with baseline is not.

Demo

https://codepen.io/RudManusachi/pen/jLgNOZ

[RudManusachi]

I've got updated my Chrome to Version 61.0.3163.79 and bug seems to be fixed. =)