带滚动区域的嵌套弹性框

Question

我试图在最新的Chrome，Firefox和IE11中实现这种布局：

我可以使用以下内容：

＆＃13;

＆＃13;

html {
  box-sizing: border-box;
}
*, *:before, *:after { 
  box-sizing: inherit;
}

html, body { height: 100%; padding: 0; margin: 0; }

p { line-height: 2em; }

header, footer, article { padding: 10px; }

#parent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: limegreen;
}

#parent > header {
    flex: none;
    background-color: limegreen;
}

#parent > footer {
    flex: none;
}

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}

#child > header {
    flex: none;
    background-color: #aaa;
}
#child > article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#child > footer {
    flex: none;
    background-color: #aaa;
}

＆＃13;

<section id="parent">
    <header>Parent flex header </header>
    
    <section id="child" >
        <header>Child flex header</header>
        <article>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
            <p>Lots of content.</p>
        </article>
        <footer>Child flex footer</footer>
    </section>
    
    <footer>Parent flex footer</footer>
</section>

＆＃13;

＆＃13;

＆＃13;

然而一些CSS我发现有点奇怪，我想确保我最有可能不会产生一些会破坏某些浏览器更新的CSS。原因是该软件将在实际硬件上运行（有点像路由器管理界面），并且无法像普通网站那样轻松更新。

因此，麻烦我的CSS是可滚动的article：

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}

我摆弄了height和min-height以使其在所有三个方面都有效。最初我只有height: 100%，但这在Firefox中不起作用。指定min-height: 0可以在Chrome和FF中使用，但在IE中则不行。这个组合似乎满足了所有3个，但谁是正确的？我可以合理地确定下一个FF或Chrome不会破坏吗？这段代码是否适用于＆＃39; spec-perspective＆＃39;？

Answer 1

确实需要设置min-height，以及实现所需布局的正确方法。 From the spec：

  

默认情况下，弹性项目不会缩小到最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。

因此，只有设置min-height，您才允许<article>实际使用flex-shrink并适合父Flex容器。

如果我看到的正确，那么您在IE中看到的问题与错误described here相符并且已确认here：

  

在IE 10-11中，列方向上的Flex容器上的min-height声明用于调整容器本身的大小，但是它们的flex项目子项似乎不知道其父项的大小。他们表现得好像根本没有设置高度。

这可能（或可能不包括）包含有关溢出的问题。

Answer 2

备选答案：只需指定flex:1中缺少的#child。这隐式设置flex: 1 1 0，即第三个0表示flex-basis:0。这很重要，因为flex-basis的默认初始值不是 0而是auto，这反过来实际上意味着content - 大小。

From the spec：

  

[{1}}中的第三个组件设置了flex-basis longhand并指定了flex   basis：自由空间之前的flex项的初始主要大小   根据flex因子分布。它采用相同的值   width属性（auto除外区别对待）和a   其他内容关键字。当从flex缩写中省略时，它   指定值为0％。

     

如果指定的flex-basis为auto，则使用   flex basis是弹性项目主要大小的计算值   属性。如果该值本身是auto，那么使用的flex基础是   根据其内容自动确定（即根据其大小确定）   含量）。

以下是修改后的代码段：

＆＃13;

＆＃13;

flex

＆＃13;

html {
  box-sizing: border-box;
}
*, *:before, *:after { 
  box-sizing: inherit;
}

html, body { height: 100%; padding: 0; margin: 0; }

p { line-height: 2em; }

header, footer, article { padding: 10px; }

#parent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: limegreen;
}

#parent > header {
    flex: none;
    background-color: limegreen;
}

#parent > footer {
    flex: none;
}

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    flex: 1;
}

#child > header {
    flex: none;
    background-color: #aaa;
}
#child > article {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#child > footer {
    flex: none;
    background-color: #aaa;
}

＆＃13;

＆＃13;

＆＃13;