css之设置滚动条的坑

1.png

如上述项目中的排行榜列表，我的需求是仅让排行榜列表出现很多行时出现滚动条

如果css代码如下，将有bug：

footer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    .caption {
      text-align: left;
      font-size: 14px;
      padding: 6px 16px;
    }
    .ranking {
      flex-grow: 1;
      overflow: auto;
      padding: 6px 16px;
      > li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        box-shadow: inset 0 -1px 1px -1px rgba(0, 0, 0, .1);
        font-size: 14px;
        > .tag-info {
          display: flex;
          align-items: center;
          > div.icon {
            background: #f5f5f5;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            justify-content: center;
            margin-right: 8px;
            display: flex;
            align-items: center;
          }
          > span {
            margin-right: 8px;
            line-height: 32px;
          }
          > span.notes {
            font-size: 12px;
            color: #bbb;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

bug就是没有出现滚动条：

2.png

现在只需添加一行就可达成需求，代码如下：

footer {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /* 添加这一行 */
    overflow: auto;
    .caption {
      text-align: left;
      font-size: 14px;
      padding: 6px 16px;
    }
    .ranking {
      flex-grow: 1;
      overflow: auto;
      padding: 6px 16px;
      > li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        box-shadow: inset 0 -1px 1px -1px rgba(0, 0, 0, .1);
        font-size: 14px;
        > .tag-info {
          display: flex;
          align-items: center;
          > div.icon {
            background: #f5f5f5;
            border-radius: 50%;
            width: 32px;
            height: 32px;
            justify-content: center;
            margin-right: 8px;
            display: flex;
            align-items: center;
          }
          > span {
            margin-right: 8px;
            line-height: 32px;
          }
          > span.notes {
            font-size: 12px;
            color: #bbb;
            width: 200px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }