具有可变高度和两个独立滚动列的Vuetify对话框

Question

我有一个对话框（高度可变），其中有一个页眉，页脚和两列内容高度可变的

我的目标是让两列中的每一个内容都有自己的单独滚动条（如果需要）。

到目前为止，我花了很长时间才弄清楚如何使对话框的整个内容首先滚动（无需滚动页眉和页脚）：

https://codepen.io/arno-van-oordt/pen/vqNQKb（更改屏幕大小以更改对话框高度）

但是我不知道如何分别对这两列进行此操作。 欢迎对此提出任何建议！

html：            

    <v-dialog v-model="dialog" width="640" persistent>
      <v-card height="90vh" class="card-flex">
        <v-layout column>
          <v-flex shrink>
            <v-toolbar dark color="primary">
              <v-toolbar-title>Some Dialog</v-toolbar-title>
            </v-toolbar>
          </v-flex>
          <v-flex class="content-flex">
            <v-layout row>
              <v-flex xs6>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque mattis mi at felis cursus,
                sit amet imperdiet arcu cursus. Morbi porta ligula et ultrices fermentum. Aliquam augue felis, ultricies non finibus ac, imperdiet non nulla. Sed varius non enim et vehicula. Donec tempus, nibh eu eleifend suscipit, dui nibh auctor magna,
                <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque
                mattis mi at felis cursus, sit amet imperdiet arcu cursus. Morbi porta ligula et ultrices fermentum. Aliquam augue felis, ultricies non finibus ac, imperdiet non nulla. Sed varius non enim et vehicula. Donec tempus, nibh eu eleifend suscipit,
                dui nibh auctor magna,
                <br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis nunc aliquam, condimentum lectus porttitor, porta arcu. Nunc eget porta est. Nulla metus lacus, sollicitudin eget interdum at, cursus ac erat. Pellentesque
                mattis mi at felis cursus.
              </v-flex>
              <v-flex xs6>
                Some text that should have it's own scrollbar
              </v-flex>
            </v-layout>
          </v-flex>

          <v-flex shrink>
            <v-layout row>
              <v-flex class="text-xs-right">
                <v-btn color="primary">SOME BTN</v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-card>
    </v-dialog>

  </v-app>
</div>

css：

.card-flex {
  display: flex;
  flex-direction: column;
}

.content-flex {
  overflow-y: auto;
  height: 0px;
}