带有滚动区域的嵌套 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 中中断吗？这段代码对 'spec-perspective' 有意义吗？

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 and acknowledged 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.

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

Answer 2

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

From the spec:

[The third component in flex] sets the flex-basis longhand and specifies the flex basis: the initial main size of the flex item, before free space is distributed according to the flex factors. It takes the same values as the width property (except auto is treated differently) and an additional content keyword. When omitted from the flex shorthand, its specified value is 0%.

If the specified flex-basis is auto, the used flex basis is the computed value of the flex item’s main size property. If that value is itself auto, then the used flex basis is automatically-determined based on its content (i.e. sized as for content).

这是修改后的片段：

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

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

Answer 3

这是 Tailwind 中的一个解决方案（将鼠标悬停在 class 名称上以查看 CSS 属性）。

关键的解决方法是使用

min-height: 0px;

在嵌套容器上。

<div class="h-screen flex flex-col">
  <div class="h-12 p-1 flex-none bg-gray-400">Header</div>
  <div class="min-h-0 flex-1 flex flex-col">
    <div class="h-12 p-1 flex-none bg-gray-200">Child Header</div>
    <div class="min-h-0 flex-1 overflow-y-auto p-4 space-y-4">
      <div class="h-[600px] bg-white border border-gray-700 rounded-sm"></div>
      <div class="h-[600px] bg-white border border-gray-700 rounded-sm"></div>
      <div class="h-[600px] bg-white border border-gray-700 rounded-sm"></div>
    </div>
    <div class="h-12 p-1 flex-none bg-gray-200">Child Footer</div>
  </div>
  <div class="h-12 p-1 flex-none bg-gray-400">Footer</div>
</div>

https://play.tailwindcss.com/b33HpTdUWu

带有滚动区域的嵌套 flexbox

Nested flexbox with scrolling area

css

flexbox