时间戳

首页 > 解决方案 > 如何在 flexbox 列项中赋予 div 100% 的高度？

html - 如何在 flexbox 列项中赋予 div 100% 的高度？

问题描述

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

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

我该如何解决这个问题，以便它也可以在 Chrome 上运行？最好我不想放弃 flexbox。

标签： htmlcssflexboxheight

解决方案

只需添加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>

推荐阅读