Html 如何使flexbox内的div列项目100%高度？

我想在一个100%高度的弹性盒子里放一个div，但我无法让它工作。情况如下：

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

我希望

#内部

跨越

#外部

的整个剩余高度。基本上，我希望红色部分覆盖下面小提琴的所有绿色部分

#外部{
高度：100px；
显示器：flex；
弯曲方向：立柱；
}
#标题{
高度：自动；
}
#中间的{
柔性生长：1；
背景颜色：绿色；
}
#内在的{
身高：100%；
背景色：红色；
}

标题
这应该是全高的。

考虑嵌套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;
}

这对我很有用：

---

也许这就是你要找的

#外部{
高度：100px；
显示器：flex；
弯曲方向：立柱；
}
#标题{
高度：自动；
}
#中间的{
显示器：flex；
柔性生长：1；
背景颜色：绿色；
}
#内在的{
背景色：红色；
}

标题
这应该是全高的。

只需将

flex-shrink:1

添加到

#middle

中，或者只需使用速记

flex:1

即可在Chrome上使用

#外部{
高度：100px；
显示器：flex；
弯曲方向：立柱；
}
#标题{
高度：自动；
}
#中间的{
弹性：1；
背景颜色：绿色；
}
#内在的{
身高：100%；
背景色：红色；
}

标题
这应该是全高的。

对我来说，它就像你描述的那样工作，没有绿色可见（Firefox，Linux）@IiroP有趣！我在Chrome 67上，IiroP的答案比我的好。