嵌套的可滚​​动Flexbox

Question

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

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

在这个gif中可以看到一个工作示例：http://cl.ly/csW1（这是通过手动操作HTML元素完成的）和Working JSFiddle。

Psuedo-Code就是：

边栏

• 标题（品牌）
• 内容（标签内容）
  • 标题（标题标题）
  • 可滚动内容（内容列表，内容等）
  • 页脚（标签内容控件）
• 页脚（标签控件）

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

破碎的（和真实版本）在此Real JSFiddle

中

有问题的CSS在这里 - 请参阅完整HTML结构的jsfiddle：

#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课程。
＆＃13;
＆＃13;
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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;