CSS实现高度自适应过渡

宗旨就是：grid-template-rows 0 -1 这里使用的是 Grid 布局

<div class="box">
    <button class="demo">Demo</button>
    <div class="auto">
      <div>
        <li class="ddd">asda</li>
        <li class="ddd">as</li>
        <li class="ddd">asd</li>
        <li class="ddd">asdas</li>
        <li class="ddd">asdasdasd</li>
      </div>
    </div>
 </div>

.demo {
      padding: 10px;
      border: 0;
      background: deepskyblue;
    }

    .auto {
      background-color: deeppink;
      border-radius: 5px;
      display: grid;
      grid-template-rows: 0fr;
      transition: all 0.5s;
      overflow: hidden;
      opacity: 0;
      width: 200px;
      margin-top: 10px;
    }

    .auto>* {
      overflow: hidden;
      min-height: 0;
    }

    .auto>div {
      min-height: 0;
      overflow: hidden;
      padding: 10px;
    }

    .demo:hover~.auto {
      grid-template-rows: 1fr;
      opacity: 1;
    }