Vuetify 和 Layout 网格系统：垂直限制元素

Question

问题很简单。 我想有一种方法来垂直限制元素，特别是 v-card，以便整个布局保持在可用屏幕的大小范围内，即使 v-card 包含大量文本，添加到 v - 卡一个滚动条，如果需要的话。这没有给任何元素一个特定的固定高度（以像素为单位）。

我将添加两个示例，我对官方页面中的示例进行了一些更改。

正如您将看到的，一切都按预期工作，但如果 v-card 文本有太多文本，它不会获得滚动条，而是扩展其容器的边界，如果它具有“位置：绝对”，如本例中https://codepen.io/anon/pen/xmvXpX?editors=1010；或者强制它的容器和它的“兄弟”以及整个布局扩展超过可用屏幕的限制，如果“位置：绝对”被删除，如本例中https://codepen.io/anon/pen/yGmPxK?editors=1010。

所以我想知道是否有一种方法可以达到预期的结果，同时保留布局扩展以平滑地完全填充屏幕的能力，因此无需在任何地方使用明显的“高度：Hpx”解决方案。

实际上，我需要在 v-card 中使用与“fit-content”相反的东西，比如“dont-care-about-content-and-keep-the-damn-height-you-had-”一开始”。

这里使用“position:absolute”的代码版本

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm d-flex style="height:100%">
      <v-layout row wrap>
        <v-flex d-flex xs12 order-xs5>
          <v-layout column>
            <v-flex d-flex>
              <v-card color="blue-grey" dark tile flat>
                <v-card-text>{{ lorem }}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex d-flex>
              <v-card color="brown" dark tile flat>
                <v-card-text>{{ lorem }}</v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex d-flex xs12 sm7>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card color="indigo lighten-2" dark tile flat>
                <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex d-flex>
              <v-layout row>
                <v-flex
                  v-for="n in 2"
                  :key="n"
                  d-flex
                >
                  <v-card
                    color="amber lighten-2"
                    tile
                    flat
                  >
                    <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex d-flex xs12 sm2 child-flex>
          <v-card color="orange lighten-2" tile flat>
            <v-card-text style="overflow: auto; position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex d-flex xs12 sm3>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>  

还有 JS

new Vue({
  el: '#app',
  data: () => ({
    lorem: `Lorem ipsum dolor sit amet, mel at clita quando. Te sit oratio vituperatoribus, nam ad ipsum posidonium mediocritatem, explicari dissentiunt cu mea. Repudiare disputationi vim in, mollis iriure nec cu, alienum argumentum ius ad. Pri eu justo aeque torquatos.`
  })
})

Answer 1

好的，经过一番折腾和更多研究，这是一个通用解决方案（也适用于普通 div）。

包含文本的div（上例中为v-card-text）必须有“position:absolute;”，父div（上例中为v-card）必须有“position:relative;overflow -y: 自动；"

如上所述，这个解决方案非常普遍，即使在某些情况下（例如，当所有内容都在 v-tabs 中时）它仍然失败，原因仍然不清楚。

这是布局按预期工作的代码笔。 https://codepen.io/anon/pen/gZVqBE?editors=1010

这些是感兴趣的行：

...
<v-card color="orange lighten-2;" style=" position: relative; overflow-y: auto;" tile flat>
            <v-card-text style="position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>
...

这是codepen中的全部代码

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-sm d-flex style="height:100%">
      <v-layout row wrap>
        <v-flex d-flex xs12 order-xs5>
          <v-layout column>
            <v-flex d-flex>
              <v-card color="blue-grey" dark tile flat>
                <v-card-text>{{ lorem }}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex d-flex>
              <v-card color="brown" dark tile flat>
                <v-card-text>{{ lorem }}</v-card-text>
              </v-card>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex d-flex xs12 sm7>
          <v-layout row wrap>
            <v-flex d-flex>
              <v-card color="indigo lighten-2" dark tile flat>
                <v-card-text>{{ lorem.slice(0, 70) }}</v-card-text>
              </v-card>
            </v-flex>
            <v-flex d-flex>
              <v-layout row>
                <v-flex
                  v-for="n in 2"
                  :key="n"
                  d-flex
                >
                  <v-card
                    color="amber lighten-2"
                    tile
                    flat
                  >
                    <v-card-text>{{ lorem.slice(0, 40) }}</v-card-text>
                  </v-card>
                </v-flex>
              </v-layout>
            </v-flex>
          </v-layout>
        </v-flex>
        <v-flex d-flex xs12 sm2 child-flex>
          <v-card color="orange lighten-2;" style=" position: relative; overflow-y: auto;" tile flat>
            <v-card-text style="position: absolute">{{ lorem.slice(0, 90) }} {{lorem}}  {{lorem}} {{lorem}} {{lorem}} {{lorem}}</v-card-text>
          </v-card>
        </v-flex>
        <v-flex d-flex xs12 sm3>
          <v-card color="red lighten-2" dark tile flat>
            <v-card-text>{{ lorem.slice(0, 100) }}</v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>