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

Question

问题很简单。 我想有一种方法来垂直限制元素，特别是v卡，以便整个布局保持在可用屏幕的尺寸之内，即使v卡包含很多文本，也可以添加到v -如果需要，可滚动条。这样就不会给任何元素指定特定的固定高度（以像素为单位）。

我将添加两个示例，我在官方页面上做了一些更改。

就像您将看到的那样，所有内容都按预期工作，但是如果v-card文本中的文本过多，则它会获得其“位置”，而不是获得滚动条，而是会扩展其容器的边框：绝对”，如本例https://codepen.io/anon/pen/xmvXpX?editors=1010；或强制容器（及其“兄弟”）和整个布局在可用屏幕的范围内扩展，如果删除了“ position：absolute”（如本示例https://codepen.io/anon/pen/yGmPxK?editors=1010）。

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

实际上，我需要在v卡中使用“适合内容”的反义词，例如“不要关心内容并保持该死的身高”一开始”。

在此处使用“ 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：相对；溢出” -y：自动；”

如上所述，该解决方案相当普遍，即使在某些情况下（例如，当所有内容都位于v-tab中时）仍然失败，原因仍然不清楚。

这是布局正常工作的代码笔。 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>
...

这是代码笔中的整个代码

<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>