css左右佈局

<div class="my-video">
 <div class="l">
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
    <p>45454</p>
   <p>45454</p>
   <p>45454</p>
   <p>45454</p>
</div> 
<div class="r">
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
 <p>45454</p>
  <p>45454</p>
 </div>
</div>

<style>
.my-video {
  display: flex;
  overflow: hidden;
}
.my-video .l {
   flex-basis: 50px;
   width: 50px;
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
}
.my-video .r {
   flex: 1;
   height: 100vh;
   overflow-y: scroll;
   overflow-x: hidden;
}
</style>