使用 bootstrap 在嵌套的 flexbox 中滚动

Question

我正在开发能够显示不同页面的 Angular (8.2.13) + Bootstrap (4.3.1) 应用程序，其中一些页面有选项卡，而另一些则没有。我遇到了与当内容变得比屏幕大时屏幕的哪一部分会出现滚动条的各种问题。

如果可能的话，我想找到一个 bootstrap-only 解决方案 来解决这个问题（没有额外的 CSS）。如果不是，则添加最少的额外 CSS 可能的解决方案。

页面结构如下：

导航栏
- 应始终位于屏幕左侧（滚动内容时切勿移动）。
- 根据其内容使用可能的最小宽度。
- 使用其容器的高度。
标签栏
- 应始终位于屏幕顶部（滚动内容时切勿移动）。
- 根据其内容使用可能的最小高度。
- 使用其容器的宽度。
内容
- 当高度高于其容器时应垂直滚动。
- 使用其容器中所有剩余的宽度和高度。

我做了一个最小的例子来重现这个问题：

代码示例

JSFiddle Exemple

HTML

<div class="d-flex h-100">
  <nav class="navbar flex-column justify-content-start navbar-dark bg-dark h-100 overflow-auto flex-nowrap w-100">
    <div class="navbar-nav">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="flex-grow-1 d-flex">
    <div class="col overflow-auto p-3">
      <div class="myContainer">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row h-10">
                <div class="col overflow-auto">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

预期行为

在没有标签的页面上，必要时应在屏幕右侧进行垂直滚动（除导航栏外的所有内容都应滚动）。
在有标签的页面上，垂直滚动应该在必要时只在容器上发生（导航栏和标签栏不应该移动）。

观察到的行为

当不涉及任何选项卡时，滚动按预期工作 => 确定。
Scroll applies to the right part of the screen when tabs are there too (meaning the TabBar dissapear when you scroll down) => NOK.

我试过的东西没有用/不可接受

在 <div class="col overflow-auto"> 上设置 height: 80vh;（或任何其他固定高度）在我的应用程序中确实有效，但它失去了内容的动态垂直大小并且不仅仅是 bootstrap（需要动态垂直尺寸，因为 TabBar 可以动态改变高度。
根据，在应该使用 flex 行为滚动的标签的每个父标签上设置 min-height: 0; 应该可以解决问题。它在我的情况下不起作用，而且它不仅仅是 bootstrap。

编辑：更新了 JSFiddle 示例中的 bootstrap 版本以匹配我的应用程序中使用的版本。

Answer 1

试试这个

body {
  overflow: hidden;
}
.inner {
  overflow-y: scroll;
  height: 100vh;
  padding-bottom: 130px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex">
  <nav class="navbar flex-column justify-content-start navbar-dark bg-dark overflow-auto flex-nowrap">
    <div class="navbar-nav" style="height: 100vh;">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="flex-grow-1 d-flex">
    <div class="col overflow-auto p-3">
      <!-- Here the container can be replaced by several others based on elements selected in the Navbar. For simple container the "overflow-auto" of the parent div is required to get the appropriate vertical scroll. Also in my application this "overflow-auto" allows to scroll vertically in this block only, but in this example the scroll is on the whole page (navbar on the left moved when scrolling, but it should be static) -->
      <div class="myContainer">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row">
                <!-- I wish for vertical scroll to happen on the following col and not at the "myContainer" level. I also want the content of one tab to take all remaining space on screen. So forcing the height on this col with style="height: 85vh" does work, but is not what I am looking for. -->
                <div class="col overflow-auto inner">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

经过与其他人的讨论，我们针对这个问题提出了一个令人满意的解决方案：

代码示例

JSFiddle example

HTML

<body style="height: 100vh;">
<div id="app-container" class="d-inline-flex h-100 justify-content-stretch">
  <nav class="navbar justify-content-start navbar-dark bg-dark">
    <div class="navbar-nav">
      <a class="nav-item nav-link pointer">Navbar</a>
    </div>
  </nav>
  <div class="d-flex">
    <div class="col p-3">
      <div class="myContainer h-100 d-flex flex-column">
        <ul class="nav nav-tabs">
          <li class="nav-item">
            <a class="nav-link">Tab 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Tab 3</a>
          </li>
        </ul>
        <div class="tab-content flex-grow-1 overflow-auto">
          <div class="tab-pane active">
            <div class="flex-item">
              <div class="row h-10">
                <div class="col">
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

使用 bootstrap 在嵌套的 flexbox 中滚动

Scrolling inside nested flexboxes with bootstrap

css

scroll

nested

flexbox

bootstrap-4