html - 嵌套的可滚​​动 Flexbox

Question

我有一个带标签内容的全高侧边栏。侧边栏内有一个带有公司品牌的页眉和一个带有用于在内容之间切换的选项卡的页脚。

内容 div 有自己的粘性页眉/页脚和可滚动的子内容 div。

可以在这个 gif 中看到一个工作示例:http://cl.ly/csW1 (这是通过手动操作 HTML 元素完成的)并使用此 Working JSFiddle .

伪代码是:

侧边栏

• 页眉(品牌)
• 内容(标签内容)
  • 页眉(标签页眉)
  • 可滚动内容(内容的列表、Divs 等)
  • 页脚(选项卡内容控件)
• 页脚(选项卡控件)

我的问题是真实版本包含一些额外的 div 元素，因为内容加载的方式(通过敲除)阻止了嵌套的 flexboxes 正确滚动内容。

损坏的(真实版本)在这个 Real JSFiddle 中

有问题的 CSS 在这里 - 请参阅 jsfiddle 以获得完整的 HTML 结构:

#inspectorContainer {
    position:absolute;
    width:320px;
    height:100%;
    float:left;
    background-color:white;
}
#parent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: limegreen;
}
#parent > header {
    flex: none;
    background-color: limegreen;
}
#parent > footer {
    flex: none;
}
.child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}
.child > .sticky {
    flex: none;
    background-color: #aaa;
}
.child > .contentblock {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}

Answer 1

当您添加更多元素时，您会弄乱结构。

基本上，

1. (可选)获取具有 contentblock 类的元素，并删除该类。
2. 获取带有 child 类的元素，并将所有类替换为 contentblock 类。
3. 获取具有 tabs-content 类的元素，并将其替换为 child 类。

body {
  margin: 0;
}
#inspectorContainer {
  position:absolute;
  width:320px;
  height:100%;
  float:left;
  background-color:white;
}
#parent {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  background-color: limegreen;
}
#parent > header {
  flex: none;
  background-color: limegreen;
}
#parent > footer {
  flex: none;
}
.child {
  display: flex;
  flex-direction: column;
  background-color: red;
  height: 100%;
  min-height: 0;
}
.child > .sticky {
  flex: none;
  background-color: #aaa;
}
.child > .contentblock {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

<div id="inspectorContainer">
  <section id="parent">
    <header>Parent flex header</header>
    <div class="child">
      <!-- main-tab -->
      <div class="contentblock" id="main-tab">
        <!-- hard code for demo-->
        <div id="entities_list"></div>
        <div id="inspector-content">
          <div class="viewerMode-normal-selection">
            <div class="firecamera">
              <header class="sticky">Child flex header</header>
              <article>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
                <p>Lots of content.</p>
              </article>
              <footer class="sticky">Child flex footer</footer>
            </div>
          </div>
        </div>
      </div>
      <!-- layers-tab -->
      <div class="content insight-tab-content" id="layers-tab">
      </div>
      <!-- tools-tab -->
      <div class="content insight-tab-content" id="tools-tab">
      </div>
      <!-- events-tab -->
      <div class="content insight-tab-content" id="events-tab">
      </div>
    </div>
    <footer>Parent flex footer</footer>
  </section>
  <footer class="footer">
    <ul class="tabs" id="inspector-tabs" data-tab="">
      <li id="tab-entities" class="tab-title active"><a href="#main-tab" class="insight-tab-title">Entities</a>
      </li>
      <li id="tab-layers" class="tab-title"><a href="#layers-tab" class="insight-tab-title">Layers</a>
      </li>
      <li id="tab-tools" class="tab-title"><a href="#tools-tab" class="insight-tab-title">Tools</a>
      </li>
      <li id="tab-alerts" class="tab-title"><a href="#events-tab" class="insight-tab-title">Alerts</a>
      </li>
    </ul>
  </footer>
</div>