Flexbox 子项中的 CSS 可滚动内容

Question

我正在尝试为单页应用程序设计布局。布局应填满整个页面的高度和宽度而不滚动。这是布局设计：

所有块都包含一点信息，它们都有固定的高度，只有一个块包含大量数据，并且它应该是可滚动的（图片上是紫色的）。

目前，我对所有 UI 块使用灵活的框，但我无法使紫色块可滚动。如何使紫色块保持灵活（即占据蓝色块内的所有可用空间），并使其内容可滚动（即内容不应是紫色块体）。

也许有更好的解决方案（我相信灵活的盒子还有其他用途）？

Answer 1

我的目标不是使用额外的块（这很容易将我的标记转换为 div-soup），但在这种情况下我必须这样做。解决方案是使用CSS的position属性，原始想法和技术细节可以在这里找到。为了实现滚动内容，我将紫色块变成了包装器，它是面向列的 Flex（蓝色块）的子级，其 Flex-grow 能力设置为 1。它占据了父级中的所有可用空间。包装纸相对定位。在这个块中，我有另一个块，它具有绝对位置，并且大小由top、bottom、left和right属性决定。这是内容所在的块，它已overflow设置为自动。

没有包装我没有解决方案。

这是现场演示：

var scrollElem = document.getElementById('scroll');
for (var i = 0; i < 100; i++) {
  (function() {
    var e = document.createElement('div');
    e.classList.add('item');
    e.innerText = "Content piece";
    scrollElem.appendChild(e);
  }());
}

HTML {
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  font-weight: 700;
}
BODY,
#main {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 0.75em;
}

/*||||*/

#scroll {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  text-align: left;
}
#footer {
  height: 30px;
}

/*||||*/

#main {
  background-color: rgb(255, 215, 125);
}
#upper {
  background-color: rgb(170, 215, 125);
}
#bottom {
  background-color: rgb(200, 50, 180);
}
#left {
  box-shadow: inset -3px 0 15px 0 rgba(60, 5, 20, 0.5);
}
#right {
  box-shadow: inset 3px 0 15px 0 rgba(60, 5, 20, 0.5);
}
#footer {
  box-shadow: inset 0 3px 15px 0 rgba(60, 5, 20, 0.5);
}
#left,
#right,
#footer {
  color: rgba(60, 5, 20, 0.8);
}

/*||||*/

.D-f {
  display: flex;
}
.A-I-c {
  align-items: center;
}
.F-D-c {
  flex-direction: column;
}
.F-D-r {
  flex-direction: row;
}
.J-C-c {
  justify-content: center;
}
.J-C-sa {
  justify-content: space-around;
}
.J-C-sb {
  justify-content: space-between;
}
.F-G-1 {
  flex-grow: 1;
}
.F-G-2 {
  flex-grow: 2;
}
.F-G-3 {
  flex-grow: 3;
}
.F-G-4 {
  flex-grow: 4;
}
.F-G-5 {
  flex-grow: 5;
}
.F-W-nw {
  flex-wrap: nowrap;
}
.F-W-w {
  flex-wrap: wrap;
}
.Pos {
  position: relative;
}
.Pos-a {
  position: absolute;
}

/*||||*/

#upper,
#bottom {
  padding: 1em;
  text-align: center;
}
#upper .popout {
  display: none;
}
#upper:hover .popout {
  display: initial;
}

ASIDE SPAN { font-size : 0.6em; }

<div id="main" class="D-f F-D-c J-C-sb">

  <div id="page" class="F-G-1 D-f J-C-sb">

    <aside id="left" class="F-G-3 D-f J-C-c A-I-c">
      Left aside
      <br/>
      <span><sup>3</sup>/<sub>12</sub></span>
    </aside>

    <div id="content" class="F-G-5 D-f F-D-c">

      <div id="upper">
        <h3>Upper block</h3>
        <div class="popout">Ta-Da!</div>
      </div>

      <div id="bottom" class="F-G-1 D-f F-D-c">
        <h3 class="header">Header</h3>
        <div class="misc">Misc</div>
        <div id="scroll-wrap" class="Pos F-G-1">
            <div id="scroll" class="Pos-a"></div>
        </div>
      </div>

    </div>

    <aside id="right" class="F-G-2 D-f J-C-c A-I-c">
      Right aside
      <br/>
      <span><sup>2</sup>/<sub>12</sub></span>
    </aside>

  </div>

  <div id="footer" class="D-f A-I-c J-C-c">Footer</div>
</div>