Html 带内滚动条和紧贴/覆盖下容器的嵌套弹性容器

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

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

我现在所拥有的一切，除了当“右上内容”很小时出现“右下”之外：

JsFiddle：

.main{
显示器：flex；
高度：200px；
}
.左{
弹性：110；
背景：红色；
}
.对{
弹性：0；
显示器：flex；
弯曲方向：立柱；
背景：绿色；
填充：4px；
}
.右上包装{
弹性：110；
溢出-x：自动；
溢出y：滚动；
背景：蓝色；
}
.右上角内容{
保证金：4倍；
高度：100px；
宽度：100px；
背景：粉红色；
}
.右下角{
弹性：0；
背景：黄色；
保证金：4倍；
}

左内容
右上角内容
右下角

好的，在快速摆弄之后，如果我对您想要实现的目标的想法正确，请更改您的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;
}

如果您希望主容器的宽度固定，也可以相应地进行调整。

您的蓝色容器（

.right top wrapper

）设置为

flex:1 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

，我必须允许较大的“right-top内容”）

不，这是flex-basis:0的结果，它转换为高度：0。如果不使用

flex grow:1

来像以前一样扩展高度，则长方体的高度为零

试试这个：

。右上包装器{flex:0 1 auto；}

现在，

flex-grow

被禁用，该框显示内容的高度

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

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

（内容很少）

（内容丰富）

这就是你想要的？