包含在弹性框中时滚动

Question

我真的很难在一组嵌套的弹性框容器中按照我的意愿进行滚动。更重要的是，我看到了对我来说根本没有意义的奇怪副作用。

我正在处理的实际网站充满了自定义元素，但为了简化问题，我用常规元素构建了一个测试页面（实际应用程序中的自定义元素具有 class "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>

我想做的是使内部部分滚动，当它们不适合页面时捕捉到它的项目。我希望滚动条位于该内部部分，因此围绕它的各种 header 都显示在适当的位置。最后，我还希望标有 class "main-section" 的 section 也可以滚动 - 但如果没有较低级别的可滚动部分，则只能在该级别滚动。

下面是我用的css。我可能需要解释的唯一奇怪的事情是 main-app 在 flex 中使用 column-reverse。这是因为最终的应用程序可能在移动设备上，所以（取决于媒体查询）我将 header 放在拇指附近。这确实对结果产生了奇怪的影响，因为当我在 Chrome 开发工具中禁用特定的 css 行并且 header 弹出到顶部时，垂直滚动条出现在最高级别，因为当它到位时根本没有。

      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 以及反之亦然的难题之外。我还有其他问题。

为什么主 Header 栏不像其他栏那样高 64 像素，尽管明确告知为 64 像素高。我看不出定义有什么不同。
为什么根本没有滚动条，尽管最里面的部分有 overflow-y: auto; 但没有其他元素标记为可滚动。
我找不到关于浏览器如何选择向哪个项目添加滚动条的规范，除非内容大于其 parent 并且 parent 溢出：滚动或汽车。它是如何选择的？
事实上我在顶层有滚动条是因为 overflow:visible 的内容超出了 window 吗？

Answer 1

此问题与 section css

有关

问题是 flex-shrink，这意味着如果为 1，此内容会与其他所有内容一起缩小。因此它不会溢出并强制滚动条。 flex-shrink 需要为 0 ，这意味着当内容不适合其容器时，它不会收缩。这会强制滚动条出现在其 parent.

上

此更改还解决了 header 尺寸过小的问题。它也被迫缩小。同样，解决方案是将 flex-shrink 因子设置为 0。

我还认为，从内到外，正确的级别会得到滚动条，因为一旦有了，它的高度就适合它的parent，依此类推层次结构。

我想如果内容无法适应 window 和 body 级别，那么顶层的滚动条也会出现。

包含在弹性框中时滚动

scrolling when contained in a flex box

css

scrollbar

flexbox