css实现左侧内容固定，右侧内容滚动效果

效果类似这种

<div class="wrapper">
        <div class="left">11</div>
        <div class="right">
            <span class="item">1</span>
            <span class="item">1</span>
            <span class="item">1</span>
            <span class="item">1</span>
            <span class="item">1</span>
            <span class="item">1</span>
        </div>
      </div>

.wrapper {
    position: relative;
    width: 100%;
    background: red;
  }
.item{
    display: inline-block;
    width: 100px;
    height: 150px;
    background: pink;
}
  .left {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(0, 128, 0);
    width: 25%;
    height: 150px;
  }
  .right{
       margin-left: 25%;
       width:75%;
       height:150px;
       background:yellow;
       white-space:nowrap;
       overflow-x:auto;
  
  }