Chrome - flexbox - 包含框

Question

请在 Chrome 中查看这支笔：codepen example

html:

<div class='flexbox'>
  <div class='static'>ddd
  </div>
  <div class='flex'>
    <div class='flex-child'>
      <div class='container'>
        *** very long text here *** ...</div>
    </div>
    <div class='flex-child'>hhh
    </div>
    <div class='flex-child'>hhh
    </div>
  </div>
  <div class='static'>ddd
  </div>
</div>

css:

html,body{
  margin:0;
  padding:0;
  overflow:hidden;
}
.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
  display:flex;
  position : relative;
}

.flex-child{
  background:red;
  width:100%;
  display:block;
  color:white;
  position : relative;
}

.static{
  background:transparent;
  width:100%;
  color:yellow;
}

.container{
  position : relative;
  background:magenta;
  height:100%;      
}

我相信这个例子几乎是不言自明的。 问题是：如何做到这一点，让 .container div 准备好承载目前未知的任何类型的内容，并且不与页脚重叠。

尝试去除背景颜色。 .container 中的文本在视觉上与 .static 页脚的文本混合在一起。如何安排它并使 .content div 及其文本不与页脚重叠？

编辑：

页脚应位于视口的底部。 不允许在 css 中设置显式大小或尺寸。

请以我的问题为例，做个实验。 我关心的是不要使用任何明确的尺寸或尺寸，例如标题高度 50px，我希望布局尽可能通用。因此，如果我用换句话说提出我的问题： 请在我的原始代码笔中删除 .container 中的所有文本，然后通过开发人员工具检查 .container 高度。它将为 0，但我希望它与父级 .flex-child 的高度相同。 我知道它可能不会遵循规范，但是如何实现呢？

编辑 2： 我在另一个问题中用codepen和图片更详细地描述了我的问题。谢谢你的想法。 https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout

谢谢

Answer 1

对于footer的实际位置，您的实际要求有点不清楚。

选项 1。

footer 应位于视口底部，因此整个页面必须包含在视口内。

在这种情况下，main 元素的内容可以是任意大小，并且当内容溢出元素的高度时会添加滚动条。

Codepen Demo

选项 2。

footer 应该位于 页面/文档 的底部，并且页面可以是任意高度（大概是视口高度的最小值）。

在这种情况下，main 元素的内容可以是任意大小，并且页面/文档会增加大小以适应它

Codepen Demo