How to maintain height transitions when the div height is dynamic?

I have a div that expands when the user clicks a toggle.

If I apply a height transition after giving that div a fixed height - 200px in my example - everything works great! - See first snippet below.

When I set the height of the expandable div to Auto, the height transition does not work any more. - See the second snippet.

I need to set the height to auto because I have a multi-select box form that increases in height depending on what options the user picks.

Is there anyway to apply the height transition from the first snippet below on a div with dynamic height like in the second snippet?

label {
  display: block;
  padding: 0.25em;
  text-align: center;
  cursor: pointer;
  color: #999;
  width: 185px;
  margin: 0 auto;
  border: 1px solid black;
  background: #131418;
  transition: background 0.5s ease;
}

#toggle {
  display: none
}

label:hover {
  color: black;
  background: white;
}

#expand {
  height: 0px;
  overflow: hidden;
  color: red;
  transition: height .75s ease-in-out;
}

#toggle:checked~#expand {
  height: 200px;
  transition: height .5s ease-in-out;
}
<input id="toggle" type="checkbox" unchecked>
<label for="toggle">Fixed Height</label>
<div id="expand">
  <section>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui</p>
  </section>
</div>

label {
  display: block;
  padding: 0.25em;
  text-align: center;
  cursor: pointer;
  color: #999;
  width: 185px;
  margin: 0 auto;
  border: 1px solid black;
  background: #131418;
  transition: background 0.5s ease;
}

#toggle {
  display: none
}

label:hover {
  color: black;
  background: white;
}

#expand {
  height: 0px;
  overflow: hidden;
  color: red;
  transition: height .75s ease-in-out;
}

#toggle:checked~#expand {
  height: auto;
  transition: height .5s ease-in-out;
}
<input id="toggle" type="checkbox" unchecked>
<label for="toggle">Dynamic Height</label>
<div id="expand">
  <section>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>

    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui</p>
  </section>
</div>