flex box内的flex box的CSS高度问题

Posted 2023-03-05

【中文标题】flex box内的flex box的CSS高度问题

【英文标题】：CSS height issue with flex box inside flex box

【发布时间】：2015-02-14 02:35:04

【问题描述】：

我对包含在弹性盒子中的弹性盒子有疑问。 http://jsfiddle.net/fr077nn2/ 的 JS Fiddle 包含以下代码：

    #container
      position: absolute;
      height: 100%;
      width: 100%;
      border: 3px solid yellow;
    
    .app 
      display: flex;
      flex-direction: column;
      height: 100%;
      border: 3px solid black;
    
    .app-header 
      border: 3px solid red;
    
    .app-content 
      border: 3px solid green;
      flex: 1;
      overflow: hidden;
    
    .app-footer 
      border: 3px solid blue;
    

   <div id="container">
      <div class="app">
        <div class="app-header">HEADER1</div>
        <div class="app-content">
          <div class="app">
            <div class="app-header">HEADER2</div>
            <div class="app-content">CONTENT2</div>
            <div class="app-footer">FOOTER2</div>
          </div>
        </div>
        <div class="app-footer">FOOTER1</div>
      </div>
    </div>

我试图让 .app-content DIV 填满父 .app DIV 的剩余空间。它适用于外盒，如小提琴所示。但是，对于内盒，CONTENT2 不会填充剩余空间。我怀疑 height:100% 在这种情况下不起作用，因为父 DIV 的高度不正确......有什么建议可以正确实现上述目标吗？

编辑：在 Firefox 上正常工作，但在 Chrome 上却没有。

【问题讨论】：

在 Firefox 上运行良好，问题出在 Chrome 上。

Added height: 100% on the .app-content 工作正常...除非我遗漏了什么？ （在 Chrome 中查看）更新小提琴：jsfiddle.net/gqjx0wr8/2

@crazymatt 这不会产生预期的输出：在 .app-content 上添加 100% 将使该 div 使用的空间超过剩余空间，即父级的 100%，因此推动外面的页脚。目标是让 .app-content 仅使用剩余空间。

@chipChocolate.py 你是对的，它似乎在 FF34 和 IE11 上运行良好。 WTH Chrome...？

是否可以选择使用 javascript？

【参考方案1】：

不确定这是否可以/是否满足您的需求，但至少它在 Chrome + FF 中有所体现；P 也许是嵌套问题。

容器上的弹性 + 内容上的弹性：

http://jsfiddle.net/fr077nn2/2/

#container
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;
  display: flex;
  flex-direction: column;

.app 
  display: flex;
  flex-direction: column;
  border: 3px solid black;
  flex-grow: 1;

.app-header 
  border: 3px solid red;

.app-content 
  border: 3px solid green;
  overflow: hidden;
  flex-grow: 1;
  display: flex;

.app-footer 
  border: 3px solid blue;

【讨论】：

谢谢。这对 Chrome 来说是一个很好的解决方法，虽然我不明白为什么在整个 DIV 链中添加 display:flex 会使事情在这里工作......从概念上讲，在 .app-content 中使用 display:flex 没有意义。跨度>

@Nick：我一直在看这个，我自己也有些困惑。我自己在 chrome 上使用 flex 时遇到了一些问题——最终得到了一些骇人听闻的解决方案。我试图在上面找到一些好的文档，但到目前为止还很短。

【参考方案2】：

为什么不简化？

使用您当前的标记

这似乎是很多不必要的 html。

您需要将 flex 一直向下嵌套。在此示例中，顶部的 flex 容器具有 height: 100vh 以占据视口的整个高度。一些灵活的孩子也是灵活的父母，他们得到display: flex和flex: 1，所以他们会成长和缩小，他们的孩子可以扩大。

示例

* 
  margin: 0;
  padding: 0;
  border: 0;

div 
  box-sizing: border-box;

#container 
  height: 100vh;
  border: 3px solid yellow;
  display: flex;

.app 
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 3px solid black;

.app-header 
  border: 3px solid red;

.app-content 
  border: 3px solid green;
  display: flex;
  flex: 1;
  overflow: hidden;

.app-footer 
  border: 3px solid blue;

<div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

---

简化示例

我们可以大大减少标记并消除嵌套弹性的需要。内容为flex: 1，并将扩展以填充页眉和页脚剩余的所有空间。

在这个例子中，body 本身就是 flex 容器，它可以被一个***的 div 包装器替换。

* 
  margin: 0;
  box-sizing: border-box;

body 
  height: 100vh;
  display: flex;
  flex-direction: column;
  border: 3px solid black;

.app-header 
  border: 3px solid red;

.app-content 
  border: 3px solid green;
  flex: 1;

.app-footer 
  border: 3px solid blue;

<div class="app-header">HEADER1</div>

<div class="app-header">HEADER2</div>

<div class="app-content">CONTENT2</div>

<div class="app-footer">FOOTER2</div>

<div class="app-footer">FOOTER1</div>

【讨论】：

对不起，我应该在描述中更具体。 HTML DIV 确实很重要，它们应该代表不同级别的嵌套 shell（实际上，不止 1 个），比如动态插入，并且可以动态删除或隐藏页眉/页脚。

【参考方案3】：

一般来说，当父级具有明确定义的高度时，100% 高度有效。在您的示例中，最外面的应用程序内容没有明确的高度，这就是为什么其子级的 100% 高度不起作用的原因。

一个简单的解决方法是使用相对绝对定位来调整孩子的大小：

#container 
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid yellow;

.app 
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 3px solid black;

.app-header 
  border: 3px solid red;

.app-content 
  border: 3px solid green;
  flex: 1;
  /* added property */
  position: relative;

.app-footer 
  border: 3px solid blue;

/* added rule */
.app-content > .app 
  height: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

/* scrollbar and border correction */
body 
  margin: 0;
  padding: 0;

div 
  box-sizing: border-box;

<div id="container">
  <div class="app">
    <div class="app-header">HEADER1</div>
    <div class="app-content">
      <div class="app">
        <div class="app-header">HEADER2</div>
        <div class="app-content">CONTENT2</div>
        <div class="app-footer">FOOTER2</div>
      </div>
    </div>
    <div class="app-footer">FOOTER1</div>
  </div>
</div>

【讨论】：

谢谢，刚刚解决了我一整天都在尝试做的事情。如果可以的话，我会投票 10 次 :)