如何给div inside flexbox column item 100% height？

Question

我想在 flex box 项目中给一个 div 100% 高度，但我无法让它工作。情况如下：

#outer (display: fled, flex-direction: column, height: 100px)
  #header (height: auto)
  #middle (flex-grow: 1)
    #inner (height: 100%)

我想要 #inner 跨越 #outer 的全部剩余高度。基本上，我希望红色部分覆盖下面fiddle中的所有绿色部分。

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex-grow: 1;
  background-color: green;
}

#inner {
  height: 100%;
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

不同的浏览器似乎对此有不同的处理方式：

Firefox 和 IE 以我想要的方式显示它，所有 #middle 红色，看不到绿色。
Chrome 渲染它就像 #inner 有 height: auto.

我该如何解决这个问题，让它在 Chrome 上也能正常工作？最好我不想放弃 flexbox。

Answer 1

考虑嵌套 Flexbox，这样您的 #middle 也是一个 flex-direction: column 弹性容器，并且 #inner 设置为随着 flex: 1 增长。

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex-grow: 1;
  background-color: green;
  display: flex;
  flex-direction: column;
}

#inner {
  height: 100%;
  background-color: red;
  display: block;
  flex: 1;
}

这对我有用： https://jsfiddle.net/yw6kpa1x/

Answer 2

也许这就是您要找的东西？

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  display: flex;
  flex-grow: 1;
  background-color: green;
}

#inner {
 
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

Answer 3

只需将 flex-shrink: 1 也添加到 #middle，或者只需使用 shorthand flex: 1 使其在 Chrome 上也能正常工作。

#outer {
  height: 100px;
  display: flex;
  flex-direction: column;
}

#header {
  height: auto;
}

#middle {
  flex: 1;
  background-color: green;
}

#inner {
  height: 100%;
  background-color: red;
}

<div id="outer">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="inner">
      This should be full height.
    </div>
  </div>
</div>

如何给div inside flexbox column item 100% height？

How to give div inside flexbox column item 100% height?

html

css

flexbox

height