Question

我正在尝试使用flexbox创建一个完整高度的页面，其中内容也使用flexbox。该页面应如下所示example of what it should look like。蓝色div是动态的，可以改变高度，红色内容应该占用内容div的剩余空间。这适用于Firefox和IE，但是在Chrome上它会溢出。有人可以解释为什么它会在Chrome上溢出吗？

HTML如下：

<body>
    <div class="container">
        <div class="navbar">Navbar</div>
        <div class="content">
            <div class="container">
                <div class="fill"></div>
                <div class="dynamic">Here is some dynamic content<br>Test</div>
            </div>
        </div>
    </div>
</body>

CSS是：

body{
    margin:0;
}
.container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.navbar{
    background-color: #ccc;
    flex: none;
}
.content{
    background-color: #333;
    flex: auto;
    padding: 10px;
}
.dynamic{
    background-color: #0066ff;
    flex: none;
}
.fill{
    flex: auto;
    background-color: #ff0000;
}

Answer 1

这是一个更新的代码段。

将flex:1用于需要自动调整高度的容器。

body {
  margin: 0;
}
.container1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}
.navbar {
  background-color: #ccc;
}
.content {
  flex: 1;
  background-color: #ff0000;
  border: 10px solid #333;
  border-bottom: none;
}
.dynamic {
  background-color: #0066ff;
  border: 10px solid #333;
  border-top: none;
}

<body>
  <div class="container1">
    <div class="navbar">Navbar</div>
    <div class="content">
    </div>
    <div class="dynamic">Here is some dynamic content
      <br>Test</div>
  </div>
</body>

Chrome flexbox在其他100％高度的flexbox溢出内100％高度

1 个答案: