当ul中内容超出范围时 自动添加滚动条

html 代码

<ul class="ul">
   <li class="num">
        <span class="Nameofjudges">
            一号
        </span>
        <span class="fraction">
            63
        </span>
    </li>
    <li class="num">
        <span class="Nameofjudges">
            一号
        </span>
        <span class="fraction">
            63
        </span>
    </li>
    <li class="num">
        <span class="Nameofjudges">
            一号
        </span>
        <span class="fraction">
            63
        </span>
    </li>
    <li class="num">
        <span class="Nameofjudges">
            一号
        </span>
        <span class="fraction">
            63
        </span>
    </li>
    <li class="num">
        <span class="Nameofjudges">
            一号
        </span>
        <span class="fraction">
            63
        </span>
    </li>
</ul>

css样式

.ul{
  width: 100%
  height:285px
  margin:0 auto
  margin-top: 3px  
  overflow:auto;/*当内容超过，出现滚动条*/
  overflow-x: none
  .num{
    margin:0 auto
    margin-top: 57px  
    width: 100%
    height: 22px;
    .Nameofjudges{
      float: left  
      margin-left: 24px
    }
    .fraction{
      float: right 
      width: 48px;
      height: 22px;
      font-size: 16px;
      font-family: PingFang-SC-Medium, PingFang-SC;
      font-weight: 500;
      color: #DE6F6F;
      line-height: 22px; 
      text-align: center
      margin-right: 20px
    }
  }
}

最终实现效果