使用 flex-column 仅滚动一个 flexbox 项目，而另一个保持固定

Posted 2023-02-22

【中文标题】使用 flex-column 仅滚动一个 flexbox 项目，而另一个保持固定

【英文标题】：Scrolling just one flexbox item while another remains fixed using flex-column

【发布时间】：2020-11-26 18:21:29

【问题描述】：

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

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

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

我原以为 flex 项的高度将根据 flexbox 的高度来确定，但显然 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"   v-if="showList">        
            <v-virtual-scroll :item- :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  max-  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    max-height = "40" max-width = "40" contain />
      </v-footer>
    </v-app>
  </v-app>
</div>

【问题讨论】：

快速解决方法是将溢出：隐藏添加到#inspire

【参考方案1】：

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

尝试添加这些 CSS 规则：

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

revised pen

【讨论】：

看来唯一需要的样式是 上的style="overflow: scroll;" ... 设置高度和弹性似乎无关紧要。他们有吗？如果是这样，为什么？ （......现在如果 Chrome 只修复阻止滚动条显示的错误......）

你可能是对的。框架样式可能已经涵盖了这些长度。我添加是因为overflow 以定义的长度协同工作。但在这种情况下，它看起来是多余的。

是的，我注意到多个滚动条问题（但它确实出现在我在 Chrome 中的测试中）。我不确定这些问题是浏览器错误。可能隐藏在代码的复杂性中。

滚动条出现在 Chromium、Safari 和 Firefox 中。