css - 百分比时 Flexbox 不遵守容器高度

Question

简单的场景 - 我会想到。

这个想法是应用栏是一个固定的高度——设置为 56px。下面的内容 DIV 应填充剩余空间 - 容器的高度约为 320px，这是使用父级的百分比设置的。

如果我使用 height:100%，flexbox 不会启动，但是，如果我使用 height:320px，它会启动。

有什么想法吗？高度必须是百分比，因为它会填充响应式父级。

<header class="img-app-bar">
    <div class="container">
        <div class="app-bar"></div>
        <div class="content"></div>
    </div>
</header>

.img-app-bar {

    .container {

        display:flex;
        flex-direction:column;

        background-color:Red;
        height:100%;

        .app-bar {
            flex:0;
        }
        .content {
            flex:1;

            background-color:Yellow;
        }
    }
}

Answer 1

如果父元素没有高度 css 样式，则子元素的高度百分比将不起作用(除非您使用绝对定位 hack)——这就是 css 的工作方式

针对您的情况的解决方法是执行以下操作(上述绝对位置破解):

.img-app-bar {
  position: relative;
  /* the following is just for giving height without using height */
  padding-top: 300px;
  background: red;
}
.container {
  /*this seems to set a height without setting a height*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.flex {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app-bar {
  height: 56px;
  background: green;
}
.content {
  flex:1;
  background: blue;
}

<header class="img-app-bar">
  <div class="container">
    <div class="flex">
      <div class="app-bar"></div>
      <div class="content"></div>
    </div>
  </div>
</header>