У меня есть проблема, которую я не могу решить vue и vuetify.У меня есть 2 строки, и верхний ряд имеет фиксированный размер, потому что данные там исправлены.Но во 2-й строке у меня есть 2 столбца, которые представляют собой таблицы данных, и данные могут быть длинными, но я хочу отобразить все, а не только несколько строк.Поэтому я хочу добиться, чтобы, когда нижний ряд становился выше высоты окна, полоса прокрутки появлялась как раз в v-flex / v-card.
Вот кодовая ручка: https://codepen.io/anon/pen/mgKERm
<div id="app" style="height:100vh">
<v-container fill-height>
<v-layout column>
<v-flex style="background-color:red" fill-height>
<v-card class="ma-3">
<v-data-table :items="items" hide-actions>
<template v-slot:items="props">
<td>{{props.item.name}}</td>
<td>{{props.item.value}}</td>
</template>
</v-data-table>
</v-card>
</v-flex>
<v-flex xs12>
<v-layout row fill-height>
<v-flex xs6 style="background-color:blue" fill-height>
<v-card class="ma-3">
<v-data-table :items="longerItem" hide-actions>
<template v-slot:items="props">
<td>{{props.item.name}}</td>
<td>{{props.item.value}}</td>
</template>
</v-data-table>
</v-card>
</v-flex>
<v-flex xs6 style="background-color:green" fill-height>
<v-card class="ma-3">
<v-data-table :items="longerItem" hide-actions>
<template v-slot:items="props">
<td>{{props.item.name}}</td>
<td>{{props.item.value}}</td>
</template>
</v-data-table>
</v-card>
</v-flex>
</v-layout>
</v-flex>
</v-layout>
</v-container>
</div>
Другая проблема в том, что он не реагирует.2-й столбец 2-го ряда при изменении размера не попадает под 1-й столбец 2-го ряда.
Может ли кто-нибудь помочь мне с этим?
Спасибо!