嵌套的柔性容器，带有内部滚动条和贴合/覆盖下部容器

Question

我有一个flexbox容器的嵌套结构，其中内部容器需要在可滚动窗格中显示可能很大的内容。但是，有时内容很小。

还有一个额外的容器需要始终可见，并且我希望在可滚动内容的下方，即在底部不远处，除非可滚动窗格内容“向下推”它 - 视口可以是比内容大得多。

我现在拥有的所有内容除了“正确的底部内容”很小外，其他所有内容都会出现：

JsFiddle：https://jsfiddle.net/u6dou3wf/10/

.main {
  display: flex;
  height: 200px;
}

.left {
  flex: 1 1 0;
  background: red;
}
.right {
  flex: 0 0 0;
  display:flex;
  flex-direction: column;
  background: green;
  padding: 4px;
}

.right-top-wrapper {
  flex: 1 1 0;
  overflow-x: auto;
  overflow-y: scroll;
  background: blue;
}

.right-top-content {
  margin: 4px;
  height:100px;
  width:100px;
  background: pink;
}

.right-bottom {
  flex: 0 0 0;
  background: yellow;
  margin: 4px;
}

<div class="main">
 <div class="left">
 Left content
 </div>
 <div class="right">
  <div class="right-top-wrapper">
   <div class="right-top-content">
    Right top content
   </div>
  </div>
  <div class="right-bottom">
   Right bottom
  </div>
 </div>
</div>

如何让“右下角”紧贴“右上方内容”，即如果粉红色部分很小，则让蓝色部分缩小，然后长到绿色内部可用的任何尺寸（减去黄色）如果粉红色部分很大？

我已经尝试.right-top-wrapper { flex: 0 1 0; }但是它缩小为空（overflow-y: scroll或auto的结果，我必须允许大的“右上方内容”）。

Answer 1

好的，有了一个快速的小提琴，如果我正确想到你想要实现的目标，改变你的CSS：

.main {
  display: flex;
  height: 200px;
}

.left {
  flex: 1 1 auto;
  background: red;
}
.right {
  flex: 0 1 auto;
  display:flex;
  flex-direction: column;
  background: green;
  padding: 4px;
}

.right-top-wrapper {
  flex: 0 0 auto;
  overflow-x: auto;
  overflow-y: auto;
  background: blue;
}

.right-top-content {
  margin: 4px;
  flex: auto;
  background: pink;
}

.right-bottom {
  flex: 0 0 0;
  background: yellow;
  margin: 4px;
}

如果您希望main为固定宽度，请相应调整。

Answer 2

您的蓝色容器（.right-top-wrapper）设置为flex: 1 1 0。这分解为：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

flex-grow: 1迫使元素消耗列中的所有可用空间，将内容（粉红色框）留在后面，并将黄色“右下角”框固定在底部。

您写道：

  

我已经尝试了.right-top-wrapper { flex: 0 1 0; }但是它缩小为空（overflow-y: scroll或auto的结果，我必须允许大的“正确的顶级内容”。）

不，这是flex-basis: 0的结果，转换为height: 0。如果没有flex-grow: 1像以前那样扩展高度，则框的高度为零。

请改为：.right-top-wrapper { flex: 0 1 auto; }

现在flex-grow被禁用，该框占据了内容的高度。

您还需要释放粉红色框上的固定高度，使其与蓝色容器一起展开。

.right-top-content { 
     /* height: 100px */ 
     min-height: 100px; /* new */
}

revised fiddle（内容很少）

revised fiddle（很多内容）