css - 仅滚动一个 flexbox 元素，而另一个使用 flex-column 保持固定

Question

我有一个 CodePen 在 https://codepen.io/james-hudson3010/pen/dyMyVMg 演示这个问题

我已经很接近我想要的了...当列表滚动时，带有“切换列表”按钮的最上面的元素保持不变。但是，当我到达列表底部时，最上面的元素会向上移动。最上面的元素应该保持固定。

检查flexbox的高度，是预期的高度。即它是正文的高度 - 页眉的高度 - 页脚的高度

我原以为 flex 元素的高度会根据 flex 盒的高度来确定，但显然 flex 元素可以不受约束地增长……这是真的吗？为什么？

JS:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    source: String,
  },

  data: () => ({
    showList: true
  }),
  
  computed: {
    filtered() {
      var items = [];
      
      for ( var i = 0; i < 15; i++ ) {     
        let newItem = {
          'name': `Item ${i}`,
          'comment': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut'
        }
        
        items.push( newItem );
      }
      
      console.log( items.length, " ]] ", items );
      
      return items;
    },
    
    children() {
      var children = [];
      
      for ( var x = 0; x < 30; x++ ) {
        let newChild = {
          'name': `Item ${x}`
        }
        
        children.push( newChild );
      }
      
      console.log( children.length, " >> ", children );
      
      return children;
    }

  }
      
      
})

HTML:

<div id="app">
  <v-app id="inspire">
    <v-app id="inspire" style="width: 100vw; height: 100vh;">
      <v-app-bar app color="primary">
        <v-btn text icon>
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
        <v-btn text icon>
          <v-icon>mdi-arrow-right</v-icon>
        </v-btn>
      </v-app-bar>

      <v-main style="height: 100%; width: 100%;">
        <div class="d-flex flex-column align-stretch" style="height: 100%; width: 100%;">

          <v-card class="pa-3 primary lighten-3" flat>
            <v-btn class="ma-4" @click="showList = !showList">Toggle List</b-btn>
          </v-card>

          <v-card flat color="transparent" height="100%" width="100%" v-if="showList">        
            <v-virtual-scroll :item-height="100" :items="filtered" bench="50">          
              <template v-slot="{ item }">
                <v-list-item>              
                  <v-list-item-content>
                    <v-list-item-title style="background-color: lightgreen;">{{ item.name }}</v-list-item-title>
                    <v-list-item-subtitle class="text-wrap" style="background-color: lightyellow;">
                      {{ item.comment }}
                    </v-list-item-subtitle>
                  </v-list-item-content>         
                </v-list-item>
              </template>         
            </v-virtual-scroll>        
          </v-card>
          <v-card width="100%" max-width="100%" height="100%" tile style="overflow: scroll;" v-else>                        
            <div v-for="item in 50">Hello {{ item }}<br></div>
          </v-card>
        </div>

      </v-main>

      <v-footer app color="primary">
        <v-img alt="Vue logo" height="40" width="40" max-height = "40" max-width = "40" contain />
      </v-footer>
    </v-app>
  </v-app>
</div>

Answer 1

代码中发生了很多事情。许多冲突和不必要的规则。但我知道你正在使用一个框架。

尝试添加这些 CSS 规则:

<v-card flat color="transparent" v-if="showList" style="height: 75%; flex: 1; overflow: scroll;"> 

revised pen