height:auto のときにtransitionが効かない

こんにちは。SESエンジニアのつくねん。です。
この間アコーディオンみたいな機能をつくっているときに
heightを0→auto
になるように設定した際に
transitionが効かないという状態になりました。

どんな状態だったか？
該当コードをすごく簡略化すると下記のようなコード

<div id="button">クリック</div>
<div id="items">
  <div>アコーディオンで表示されるアイテム</div>　　
　<div>アコーディオンで表示されるアイテム</div>
　<div>アコーディオンで表示されるアイテム</div>
</div>

#items {
  height: 0;
  overflow: hidden;
  transition: height 1s ease;
}

#items.active {
  height: auto;
}

アコーディオンで表示されるアイテム数が
データによって変わるので要素の高さにしたいと思いautoを使っていました。

しかし、これだとうまくいきません。
transitionを効かせるにはheightの値を明示的に指定する必要があるようです。

解決案は？
もしも、要素の高さが常に一定であればその高さを指定で良いみたいです。
ただ、今回は要素の高さが変わるので
JSで対応しました。
・要素の高さを取得しその高さを設定
で無事に対応できました。

CSSだけで何とかならないものかと調べてみましたが
これといった方法を見つけられませんでした。
毎回JSで対応しないといけないのであれば面倒だなと思ってます。。。