css - 在嵌套的 flexbox 内滚动

Question

我正在开发一个 React 应用程序，该应用程序有一个模式，其中包含一些偶尔需要滚动的选项卡式内容。但是，问题是我无法获得正确的滚动内容。

模态分为三个主要部分:

1. 页眉
   • 应该始终在模态框的顶部可见
2. 内容
   • 应该填充 Header 和 Footer 之间的空间，但绝不要从 View 中强制任何一个
3. 页脚
   • 在内容
   下方应始终可见
   • 这可能意味着在模式的底部(如果 Content 填充剩余空间)或 Content 下方(如果 Content 不填满空间)

虽然这很容易实现(而且我已经这样做了)，但问题在于 Content 不应该滚动，而是 inside 应该。下图中是预期行为的两个示例，一个具有应该滚动的长内容，一个没有。

我正在使用自定义 Tabbed 组件，该组件在容器内呈现某些内容。这个容器(下图中的白色)是必要时滚动的。

我最远的可以在下面的 CodePen 和示例代码中找到。我目前能够滚动包含预期可滚动内容的元素，但实际上无法滚动该内容。如果您检查 Pen，您会看到它(出于某种原因)延伸到包含元素之外。

代码示例

CodePen Example

HTML

<div class="modal">
  <div class="background" />
  <div class="modal_content">
    <div class="header">Random header</div>
    <div class="tabbed_content">
      <div class="tabs">
        <div class="tab active">Tab 1</div>
        <div class="tab">Tab 2</div>
      </div>
      <div class="content">
        <div class="scrollable">
          Tabbed Content
          <br /><br /><br /><br /><br /><br />
          Another Couple Lines
          <br /><br /><br /><br /><br /><br />
          More Tabbed Content
          <br /><br /><br /><br /><br /><br />
          Even More Content!
          <br /><br /><br /><br /><br /><br />
          Why not more yet!
          <br /><br /><br /><br /><br /><br />
          Some Ending Content
          <br /><br /><br /><br /><br /><br />
          Final Content!
        </div>
      </div>
    </div>
    <div class='footer'>
      <button class='button'>
        Done
      </button>
    </div>
  </div>
</div>

CSS

body {
  font-family: 'Montserrat', sans-serif;
}

/* Modal wrapper */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* Modal background styles */
.background {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}

/* Modal content */
.modal_content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  width: 85%;
  margin: 0 auto;
  background-color: white;
}

.header {
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: 125%;
  text-align: center;
  font-weight: bold;
  background-color: #EEEEEE;
  border-bottom: 1px solid #CECECE;
}

/* Contains the tabs and content */
.tabbed_content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* IGNORE */
.tabs {
  display: flex;
  /* NOTE: Added to stop them from hiding */
  flex-shrink: 0;
}

/* IGNORE */
.tab {
  flex-grow: 1;
  margin-top: 8px;
  padding: 0.5rem;
  text-align: center;
  background-color: #CECECE;
}

/* IGNORE */
.tab.active {
  margin-top: 0;
  font-weight: bold;
  background-color: #EEEEEE;
}

/* Contains the current tab's content */
/* NOTE: This shouldn't scroll */
.content {
  padding: 1rem;
  background-color: #EEEEEE;

  /* NOTE: Currently the closest I can come */
  /*overflow: auto;*/
}

/* IMPORTANT: This should scroll if necessary! */
.scrollable {
  padding: 0.5rem;
  background-color: white;
  /* NOTE: Can't get this to scroll */
  /*overflow: auto;*/
  border: 1px dashed #CECECE;
}

.footer {
  display: flex;
  flex-align: center;
  flex-shrink: 0;
  justify-content: center;
  margin-top: 1rem;
  padding: 1rem;
  border-top: 1px dashed #CECECE;
}

/* IGNORE */
.button {
  padding: 0.75rem 1rem;
  font-size: 90%;
  color: white;
  background-color: lightseagreen;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

我几乎对此束手无策(到目前为止已经花了 2 个小时搞砸了)。提前感谢您的帮助!

附:我还需要担心在某些时候模态打开时停止背景滚动...

Answer 1

一般来说，overflow: auto要渲染一个垂直滚动条，需要在容器上定义一个高度。

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

^{source: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

但是，这并不总是一个实用的解决方案，尤其是在动态环境中。

在您的布局中，简单的解决方案是使容器 (.content) 成为 flex 容器。这足以使布局在 Chrome (demo) 中工作。

但是，为了使布局也能在 Firefox 和 Edge 中工作，您需要覆盖 flex 项的默认最小高度，即 min-height: auto。这可以防止 flex 元素缩小到其内容大小以下，从而消除了 overflow 发生的可能性。 (full explanation)

对您的代码进行以下调整:

.tabbed_content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;                  /* NEW, esp for FF & Edge (see link below) */
}

.content {
  padding: 1rem;
  background-color: #EEEEEE;
  overflow: auto;                /* KEEP THIS, for FF & Edge (see link below) */
  display: flex;                 /* NEW */
  flex-direction: column;        /* NEW */
}

.scrollable {
  padding: 0.5rem;
  background-color: white;
  overflow: auto;               /* RESTORE */
  border: 1px dashed #CECECE;
}

revised codepen

更多详情:Why doesn't flex item shrink past content size?