在嵌套的flexbox中滚动

Question

我正在开发一个React应用程序,它有一个带有一些Tabbed内容的模态,偶尔需要滚动.但是,问题是我无法设法滚动正确的内容.

模态分为3个主要部分:

1. 头
   • 应始终在模态的顶部可见
2. 内容
   • 应该填充页眉和页脚之间的空间,但不要强迫观看
3. 页脚
   • 应始终在内容下方可见
   • 这可能意味着在模态的底部(如果内容填充剩余空间)或在内容下面(如果内容 不填充空间)

虽然这很容易实现(我已经这样做了),但问题出现在内容不应该滚动,而是内部应该有的东西.在下面的图像中是两个预期行为的示例,一个具有长内容,应滚动而另一个不滚动.

我正在使用一个自定义Tabbed组件,它在容器内呈现内容.如果需要,此容器(下图中的白色)应滚动.

我可以在下面的CodePen和示例代码中找到最远的地方.我目前能够滚动包含预期可滚动内容的元素,但实际上无法滚动该内容.如果您检查笔,您可以看到它(由于某种原因)延伸超过包含元素.

代码示例

CodePen示例

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个小时搞乱).在此先感谢您的帮助!

PS我还需要担心在模态打开的时候停止背景滚动...

Answer 1

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

为了overflow产生效果,块级容器必须具有设置高度(height或max-height)或white-space设置为nowrap.

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

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

在您的布局中,简单的解决方案是使container(.content)成为一个flex容器.这足以使布局在Chrome(演示)中运行.

但是,要使布局也适用于Firefox和Edge,您需要覆盖弹性项目的默认最小高度,即min-height: auto.这可以防止弹性物品缩小到其内容的大小以下,从而消除了发生这种情况的可能性overflow.(完整的解释)

对代码进行这些调整:

.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;
}

修改后的codepen

更多详细信息:为什么flex项目不会缩小内容大小？