css - 带有滚动区域的嵌套 flexbox

Question

我正在尝试在最新的 Chrome、Firefox 和 IE11 中实现这种布局:

我可以用下面的方法让它工作:

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;
}

<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>

但是我发现一些 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 中中断吗？从“规范 Angular ”来看，这段代码是否有意义？

Answer 1

设置min-height确实是必需的，并且是实现所需布局的正确方法。 From the spec :

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

所以只能通过设置min-height你允许你的<article>吗实际使用 flex-shrink并放入父 flex 容器中。

如果我没看错，您在 IE 中看到的问题与错误 described here 相符并承认here :

In IE 10-11, min-height declarations on flex containers in the column direction work to size the containers themselves, but their flex item children do not seem to know the size of their parents. They act as if no height has been set at all.

这可能(也可能不)包含有关溢出的问题。