如何用flex布局实现类似通讯录的效果？？

——————————————布局文件——————————————

<view class=“container”>

  <view class=“content”>

    content

  </view>

  <view class=“sider-bar” wx:for=“{{letterArray}}” wx:key=“id”>

    <view class=“letter-item”>{{item}}</view>

  </view>

</view>———————————————css：———————————————————————————

.container {

  width: 100%;

  background-color: gray;

  display: flex;

}

.content {

  height: 600rpx;

  background-color: yellow;

  flex: 1;

}

.sider-bar {

  width: 100rpx;

  background-color: forestgreen;

  font-size: 20px;

  text-align: center;

}

————————————————————————————————————————————

但是实际i这个效果是这样的。。。

期望效果，右边的是顶宽，ABCD…垂直排列，类似通讯录。在线等。。谢谢大神。