v-row v-col 子要素の高さを親要素に合わせて自動的に大きくする（レスポンシブ対応）

意外と苦戦するこういうレイアウト・・

左側はラベル領域で高さいっぱいの背景にする。
右側はデータによって高さが可変というパターン。
かつ、レスポンシブにも対応する。

ソース

<template lang="pug">
v-container 
    v-row.align-stretch(align="center" no-gutters)
        v-col(v-for="i in 10" sm="6" cols="12" :key="i")
            v-row(no-gutters style="height:100%; border-bottom:1px solid #ccc")
                v-col.grey(sm="3")
                    .ma-2 label:{{ i }}
                v-col(sm="9")
                  .ma-2
                    div(v-if="i % 2 == 0")
                        v-textarea(outlined label = "textarea")
                    div(v-else)
                        v-text-field(outlined label = "textfield")
</template>

ポイント

親のv-rowに.align-streachを当てて子供のv-rowにstyle="height:100%;する。