如何使flexbox列项目内的div高度为100％？

Question

我想给柔韧性盒内的div设置100％的高度，但我无法使其正常工作。情况如下：

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

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

#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

只需将flex-shrink: 1添加到#middle，或仅使用简写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>

Answer 2

请考虑嵌套Flexbox，以使您的#middle也是flex-direction: column flex容器，并且#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 3

也许这就是您想要的？

#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>