플렉스-컬럼을 사용하여 다른 항목을 고정하는 동안 하나의 플렉스박스 항목만 스크롤

플렉스-컬럼을 사용하여 다른 항목을 고정하는 동안 하나의 플렉스박스 항목만 스크롤

https://codepen.io/james-hudson3010/pen/dyMyVMg에서 문제를 설명하는 CodePen을 가지고 있습니다.

난 내가 원하는 것에 가까워...목록이 스크롤되는 동안 "Toggle List" 버튼이 있는 맨 위 항목은 고정된 상태로 유지됩니다.단, 리스트의 맨 아래까지 올라가면 맨 위 아이템이 올라갑니다.맨 위 항목은 고정된 상태로 유지됩니다.

플렉스 박스의 높이를 확인하면 예상되는 높이입니다. 즉, 본체의 높이 - 헤더 높이 - 푸터의 높이입니다.

플렉스 아이템의 높이는 플렉스 박스의 높이에 따라 결정된다고 생각했지만 플렉스 아이템은 자유로워질 수 있는 것 같습니다만…그게 사실입니까?

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>

암호에 많은 일이 일어나고 있어많은 갈등과 불필요한 규칙들.하지만 틀을 사용하시는 건 이해해요

다음 CSS 규칙을 추가해 보십시오.

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

수정필

언급URL : https://stackoverflow.com/questions/63284408/scrolling-just-one-flexbox-item-while-another-remains-fixed-using-flex-column