flex实现嵌套滚动

效果图

image.png

滚动地址时已选择的和请选择提示不动,就只有地址列表滚动动

<div class="area-select">
    <ul>
      <li>内蒙古</li>
      <li>请选择</li>
    </ul>
    <ul class="area-list">
      <li>北京</li>
      <li>重庆</li>
      <li>上海</li>
      .....
    </ul>
</div>
<style>
.area-select {
  height: 50vh; // 外层容器高度50vh
  display: flex; // 布局方式为flex
  flex-direction: column; // 主轴方向column
}
.area-select .area-list {
  overflow: hidden;
  overflow-y: scroll;
}
</style>