UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:54.0) Gecko/20100101 Firefox/54.0

Steps to reproduce the problem:
I have an example page set-up with the minimal amount of code necessary to break the height calculation here: https://codepen.io/anon/pen/NgEpBL?editors=1100

When you open that page in Chrome you will not see all the bullet points with a scrollbar because the height calculation in combination with flexbox seems to break.

What is the expected behavior?
There should be a scrollbar on the element with the css class 'filter-categories' because this has an overflow-y: auto set on it.

What went wrong?
The scrollbar doesn't appear, most likely (as far as I could see in the inspector) because the height calculation on the element with css class 'filter-wrapper' isn't correct.

The div with css class 'filters' is limited with a max-height: 30% clause, however when it hits this limit the chrome engine seems to think this element is bigger. You will see the correct behavior if you change the 'height: auto' to 'height: 30%' on the css class 'filters'.

Did this work before? No 

Chrome version: 59.0.3071.115 (Official Build) (32-bit) (cohort: Stable)  Channel: stable
OS Version: 10.0
Flash Version: 25.0.0.171

I've tested this in some other browsers:
- Edge and Firefox work fine
- Chrome and Safari are broken
 

Deleted: chrome_flex_bug.png 57.2 KB

	chrome_flex_bug.png 57.2 KB View Download