html - 如何在 flexbox 布局中将 div 包装在父 div 中？

Question

我正在尝试让带有导航标题和可滚动内容区域的 flexbox 正常工作。我希望能够执行此操作的区域是包含其他元素的较大页面的一部分，因此我有兴趣将 flex 区域包装在父标记中，以便只有这两个元素受到影响。

我很接近!这是我到目前为止所做的 fiddle :http://jsfiddle.net/AurumPotabile/pv9abdax/

该演示具有我正在寻找的功能，但结构不正确，因为现在它似乎需要 html, body 样式。一旦我取消注释 HTML 中的开始和结束 flexArea 标签并相应地更改样式引用，我就失去了 dbList 的百分比大小，这迫使它扩展到窗口的高度.

如何包装灵活的 div，以便 dbList 保留我正在寻找的大小？

Answer 1

你确实很接近。 将 flex div 设置为 flex 并给它 100% 的高度。

要遵循的工作片段:

html, body {
  height: 97%;
  display: flex;
  flex-direction: column;
}

#navList {
  text-align: center;
  padding: 10px 0;
  background-color: red;
}

#dbList {
  flex-grow: 1;
  overflow: auto;
  background-color: aqua;
}

.flexArea {
    height: 100%;
    display: flex;
    flex-direction: column;
}

<div class="flexArea">
  <div id="navList">A | B | C | D</div>
  <div id="dbList">This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine. This is my div. There are many like it, but this one is mine.END</div>
</div> 

解释:

如果您不设置 div 的高度，则默认值为 auto。因此，您的 flexBox 将适应其内容。如果内容比浏览器窗口大，flexBox 将不得不滚动以适应。如果将其高度设置为 100%，flexBox 将适合其容器(在本例中为 body)并且其内容将滚动。

百分比高度表示相对于父框的高度，如文档所述on MDN :

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.