如何在 flexbox 列项中赋予 div 100% 的高度？ [复制]答案

【问题标题】：How to give div inside flexbox column item 100% height? [duplicate]如何在 flexbox 列项中赋予 div 100% 的高度？ [复制]
【发布时间】：2018-12-10 23:05:51
【问题描述】：

我想给一个弹性盒子项目内的 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。

【问题讨论】：

对我来说，它按照你的描述工作，看不到绿色（Firefox，Linux）
@IiroP 有趣！我在 Chrome 67 上。

标签： html css flexbox height

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

IiroP 的回答比我的好。

【解决方案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>

【讨论】：