如何实现ul中的li竖着平分div盒子？如图效果

Question

问题遇到的现象和发生背景

问题相关代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
      </ul>
//---------------------------
<style scoped>
ul,li{
    padding: 0;
    margin: 0;
}
ul{
    width: 60px;
    height: 200px;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
li{
    list-style: none;
    width: 100%;
    border-bottom: solid 1px #333;
}
li:last-child{
    border-bottom: none;
}
</style>