CSSで横スクロールの中に縦スクロールを実装したい

前提・実現したいこと

VueでTrello風のタスク管理アプリケーションを学習で作成しており、チケットをまとめているリストカードを横スクロールで。
チケット自体は縦スクロールで実現したい。

発生している問題・エラーメッセージ

カードをリスト表示しているコンポーネントでの縦スクロールはCSSで実現できました。
カードの親コンポーネントであるカードをまとめているカードリストを表示しているコンポーネントに
横スクロールを実装しようとすると子コンポーネントのチケットまで横スクロールになってしまいます。

該当のソースコード

html
1[Board.vue]//カードをまとめるリストのコンポーネント
2<div class="listindex">
3       
4     <draggable 
5      tag="div"
6      :list="lists"
7      :options="{animation:600}"
8      @end="moveList"
9      >
10
11       <list v-for="(item,index) in lists"
12         :key="item.taskid"
13         :taskid="item.taskid"
14         :title="item.tasktitle"
15         :listindex="index"
16         @listget="taskGet"
17         class="list"
18       　>
19       </list>
20     </draggable>
21       
22 </div>
23
24<style scoped>
25.listindex {
26  overflow-x: auto;
27  white-space: nowrap;
28  -webkit-overflow-scrolling: touch;
29  padding: 0;
30  text-align: center;
31}
32</style>
33

[card.vue]//カードのコンポーネント
 <div class="cardindex">

     <draggable 
        tag="div"
        :list="cards"
        :options="{animation:600}"
        group="taskitems"
        @end="moveCard"
        @add="addCard"
     >

        <card-list v-for="(item,index) in cards"
           :key="item.cardid"
           :cardid="item.cardid"
           :cardtitle="item.cardtitle"
           :cardstarttime="item.start"
           :cardendtime="item.end"
           :cardenddate="item.enddate"
           :cardstatus="item.cardstatus"
           :cardindex="index"
           :cards="cards"
           :taskid="taskid"
           @deleted="cardsGet"
       />
    </draggable>

</div>

<style scoped>
.cardindex {
  overflow-y: auto;
  max-height: 350px;
  -webkit-overflow-scrolling: touch; 
  padding: 0;
}
</style>