包含在flex框中时滚动

提问者：小点点

包含在flex框中时滚动

我真的很难在一组嵌套的flex box容器中使滚动工作如我所愿。更重要的是，我看到了奇怪的副作用，对我来说根本没有意义。

我正在工作的实际站点充满了自定义元素，但是为了简化问题，我用常规元素构建了一个测试页面（那些实际应用程序中的自定义元素添加了类“custom”），因此其他人可以在https://www.chandlerfamily.org.uk/trial.html上看到我对这个试用页面的看法

html在这里

  <body>
    <div class="main-app custom">
      <header class="main-header">Main Header Bar</header>
      <section class="main-section">
        <div class="page-manager custom">
          <div class="managed-page custom">
            <div class="page-template custom">
              <header class="secondary-header">Secondary Header</header>
              <section class="container">
                <div class="list-manager custom">
                  <header class="list-header">List Header</header>
                  <section class="list scrollable">
                    <div class="item">Item 1</div>
                    <div class="item">Item 2</div>
                    <div class="item">Item 3</div>
                    <div class="item">Item 4</div>
                    <div class="item">Item 5</div>
                    <div class="item">Item 6</div>
                    <div class="item">Item 7</div>
                    <div class="item">Item 8</div>
                    <div class="item">Item 9</div>
                    <div class="item">Item 10</div>
                    <div class="item">Item 11</div>
                    <div class="item">Item 12</div>
                    <div class="item">Item 13</div>
                  </section>
                </div>
              </section>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>

我正在尝试做的是使内部部分滚动，当它们不适合在页面上时，按下它的项目。我希望滚动条在内部的部分，这样围绕它的各种标题都显示在适当的地方。最后，我还希望标签为类“main-section”的section也是可滚动的--但只有当没有更低级别的可滚动部分时，才可以在该级别滚动。

下面是我正在使用的css。我可能需要解释的唯一奇怪的事情是在flex中对main-app使用column-reverse。这是因为最终的应用程序可能在手机上，所以（取决于媒体查询）我把头部靠近拇指。这确实对结果有一个奇怪的影响，当我在Chrome dev工具中禁用了那个特定的css行，标题弹到顶部时，一个垂直滚动条会出现在顶部，而在这个位置上，它根本就不会出现。

      html {
        background: #ffffff;
      }

      body {
        margin: 0;
        height:100vh;
        width:100vw;
        font-family: sans-serif;
        line-height: 1.5;
        letter-spacing: 0.1em;
        background-color: #fafafa;
        color: #333;
      }
      .custom {
        height:100%;
        display:flex;
        flex-direction: column;

      }
      .main-app {
        flex-direction: column-reverse ;
      }
      header {
        background-color: #42d9ff;
        flex: 0 1 64px;
        height:64px;
      }
      section {
        flex: 1 1 auto;
      }
      .scrollable {
        overflow-y: auto; 
        scroll-snap-type: y mandatory;
      }
      .item {
        height: 50px;
        scroll-snap-align:start;
        border-radius: 5px;
        box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.31);
        margin:0 5px 5px 3px;
      }
      .page-template {
        margin: 40px auto 40px auto;
        max-height: 100%;
        border-radius: 10px;
        box-shadow: 0px 0px 38px -2px rgba(0, 0, 0, 0.5);
        padding: 20px;
        min-width: 500px;
        box-sizing:border-box;
      }

因此，除了关于为什么滚动条会出现，而不是当我将column-reverse更改为column，反之亦然时。我还有别的问题。

为什么主标题条不像其他标题条那样高64像素，尽管特别被告知是64px高。我看不出定义有什么不同。
尽管最里面的部分有overflow-y:auto；，但没有其他标记为可滚动的元素，但为什么没有任何滚动条。
我找不到关于浏览器如何选择向哪个项添加滚动条的说明，除了内容大于其父项并且其父项有溢出:滚动或自动。它如何选择？
我之所以在顶层得到滚动条是因为内容溢出:窗口之外的可见？

共1个答案

匿名用户

此问题与节css有关

问题是flex-shrink，意味着如果为1，则该内容将与其他内容一起收缩。因此，它不会溢出和强制滚动条。 flex-shrink需要为0，这意味着当内容不适合其容器时，它不会收缩。这将强制滚动条出现在其父级上。

此更改还处理标题大小变小的问题。它也被迫收缩。同样，解决方案是将flex-shrink因子设置为0。

我还认为，从里到外，正确的级别会得到滚动条，因为一旦它有了，它的高度就可以满足其父级的要求，以此类推。

我还想，如果内容无法在窗口和主体级别中容纳，则会出现顶层滚动条。