Question

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

我太近了！这是我到目前为止所做的事情的小提琴：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所示：

百分比是根据生成的框的包含块的高度计算的。如果未明确指定包含块的高度（即，它取决于内容高度），并且此元素未绝对定位，则该值计算为auto。根元素的百分比高度相对于初始包含块。

Answer 2

这可能更多是百分比高度在CSS中的工作方式，而不是如何包装flex项目或flex容器。

您未经注释的代码很好。您已为Flexbox布局创建了一个可靠的结构。

您的HTML：

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

取消评论容器div（.flexArea）时布局中断的原因是因为您没有指定div的高度，因为{{3使用百分比高度时。

基本上，如果要使用百分比高度，则必须指定所有父元素的高度，包括body和根元素（html）。因为height没有宣布.flexArea，所以你失去了想要的高度。*

取消注释HTML代码并对CSS进行以下调整后，flexbox似乎可以正常工作。

<强> CSS

html, body {
  height: 97%;
}

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

DEMO：required for elements that are not absolutely positioned

^{*为了清楚地了解CSS中高度百分比的工作原理，请在此处查看我的答案：http://jsfiddle.net/pv9abdax/5/}

如何在flexbox布局中将div放在父div中？

2 个答案: