ul 根据接口返回数据repeat 多了li，想让出现横向滚动条

Question

为什么不出现滚动条？难道是因为数据是异步请求的原因？

 <ul>
        <li v-for="(item ,index) in  Data" :key="index">
          <div class="task-item" >
            <p>{{item.time}}</p>
            <p>{{item.status }}</p>
          </div>
        </li>
      </ul>

ul {
      width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
    }
      li {
        display: inline-block;
        }
``

Answer 1

width: 100%;这个换成一个固定的宽度试试