html - 全屏 flex 布局 : Necessity of intermediate flex boxes

Question

下面显示了一个典型的 flex 布局的测试用例，该布局具有固定大小的标题和占据屏幕其余部分的正文。

body 中比 body 大的元素会自己滚动，而不是让整个页面都有一个滚动条。

虽然这个解决方案有一些让我恼火的地方:所有中间 div(例如本示例中的 #intermediate)也需要有 display: flex。只需禁用 #intermediate 的 css 即可明白我的意思。

当他们的 child 的总高度变得太高时，我找不到一种方法来阻止非 flex div 变得比他们的 parent 大。

这很烦人且令人困惑。为什么这是必要的？还有别的办法吗？

编辑:请注意，这是一个简化的示例 - 在我的真实情况下，滚动部分嵌套得比一层更深，这使得必须拥有所有中间 div 变得更加难看是 flex 盒子。

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

#outer {
  display: flex;
  flex-direction: column;
  background-color: green;
}

#heading {
  background-color: red;
}

.row {
  margin: 5px;
  height: 300px;
  width: 100px;
  background: beige;
}

#inner {
  overflow-y: scroll;
}

#intermediate {
  display: flex
}

<div id="outer">
  <div id="heading">
    Heading
  </div>
  <div id="intermediate">
      <div id="inner">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
      </div>
    </div>
</div>

Answer 1

如果您只是想要这种布局，则不必强制使用带有 display: flex; 的中间 div 集。检查这个例子:

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

#outer {
  display: flex;
  flex-direction: column;
  background-color: green;
}

#heading {
  background-color: red;
}

.row {
  margin: 5px;
  height: 300px;
  width: 100px;
  background: beige;
}

#inner {
  align-self: flex-start;
  overflow-y: scroll;
}

<div id="outer">
  <div id="heading">
    Heading
  </div>
      <div id="inner">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
      </div>
</div>

如您所见，不需要中间件:我只是使用 align-self 属性来处理左侧栏的位置(一些关于 flexboxes 的很​​好的引用，如果您没有我还没读过:https://css-tricks.com/snippets/css/a-guide-to-flexbox/)。

需要注意的一件好事是，通过这种方式，您不能在 #inner div 的右侧设置一些内容，因为定位是由 flexbox 父级自动完成的。如果你想这样做，你最终会使用 #intermediate div。

I can't find a way to stop non-flex divs to become larger than their parents when their combined children's height gets too tall.

您不能真正这样做，因为这不是它呈现的方式:首先呈现内部 div，因为它们包含要显示的内容。然后，它们被定位在本身呈现的父级中。如果父级对 height 有限制，则 overflow 属性会改变渲染。

根据文档 ( https://developer.mozilla.org/en-US/docs/Web/CSS/overflow )，默认的 overflow 值是 visible 并且内容不会被剪裁。为了防止子 div 变得比父 div 大，您必须设置一个 overflow。

这个答案非常大，如果不清楚或者您需要一些额外的信息，请不要犹豫发表评论!

编辑

按照 OP 的要求，这里有一个示例，没有删除 #intermediate div，也没有将其 display 设置为 flex:

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

#outer {
  display: flex;
  flex-direction: column;
  background-color: green;
}

#heading {
  background-color: red;
}

.row {
  margin: 5px;
  height: 300px;
  width: 100px;
  background: beige;
}

#inner {
  height: 100%;
  display: inline-block;
  overflow-y: scroll;
}

#intermediate {
  height: 100%;
  overflow: hidden;
}

<div id="outer">
  <div id="heading">
    Heading
  </div>
  <div id="intermediate">
      <div id="inner">
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
      </div>
    </div>
</div>