max-heightと、overflow:auto

cssにおいて、max-heightを使うと、overflow: auto;でも、常に、スクロールが表示されました。

次のように記述すると、高さが500pxより高くなったときだけスクロールが表示されます。
max-height: 500px;
overflow: auto;

しかし、常にスクロールが表示されて悩みました。
原因は、次のような記述を加えていたことでした。

.clearfix:after{
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

これにより、常に、指定の高さを超えている（overflowしている）と判定されたようです。

今更、古いブラウザを考慮する必要はないだろうと、下記に書き換えて解決しました。

.clearfix:after{
  content: "";
  clear: both;
  display: block;
}