CSS Flexbox应用程序布局问题

我有两个独立的代码笔，我一直在使用，一个是网站的主布局，它工作得很好，第二个是一个组件，我想添加到主布局的左侧边栏中

当组件位于具有设置高度的容器内时，它将以我想要的方式收缩和拉伸（如果在这种类型的父div内）

当我将组件添加到主布局中时，它会扩展左侧边栏，打破完美的布局，我希望主布局与当前浏览器窗口的大小相同，并且页面永远不会滚动。有没有办法告诉这些边栏“

.layout left

”

.layout stage

”和“

.layout right

”不要展开

以下是我所说的代码笔：

主要布局工作：

工作侧栏：

合并（不工作）：

我正在使用的布局CSS：

body  {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}

.layout-middle{
  display: flex;
  flex: 1;
}

.layout-stage{
  flex: 1 0 320px;
  background: #ffc94e;
}

.layout-left, .layout-right{
  flex: 0 0 320px;
  background: #c9ea5d;
}

.layout-left{
  background: #85d6e4;
}

.layout-header{
  height: 100px;
  background: #92e4c9;
}

.layout-footer{
  height: 150px;
  background: #f7846a;
}

我希望主布局是当前浏览器窗口的大小，并且页面永远不会滚动

---

在这种情况下，您还需要为元素设置

最大高度

，至少对于

布局中间

和

弹性流：列我还添加了一个.container包装器，带有
display:flex；弯曲方向：立柱；高度：100vh并从正文中删除了大多数属性。叉形笔：
您当前有
.layout header
、
.layout middle
和
。layout footer
设置为填充可用的垂直空间，问题是
中的内容长度。layout left
。有几种方法可以阻止
.layout left
的内容溢出容器

溢出方法

通过添加
.overflow-y:auto
至
.layout left
如果滚动条的内容超过其高度，可以确保滚动条显示，防止内容溢出


.panel{
显示器：flex；
柔性流动：柱；
/*填充：1em*/
溢出：隐藏；
flex:1；/*添加此*/
}
标题{
最小高度：32px；/*添加此*/
高度：32px；/*必须为32px*/
背景：#C0C0；
}
页脚{
背景：#cfcfcf；
高度：32px；/*必须为32px*/
}
.选择列表{
/*弹性：1*/
溢出y：滚动；
/*最大高度：16vh；移除此*/
}
.选择列表项{
背景：白色；
边框：1px纯黑；
高度：32px；/*必须为32px*/
}
/*===============================================*/
身体{
显示器：flex；
最小高度：100vh；
最大高度：100vh；
弯曲方向：立柱；
宽度：100%；
保证金：0自动；
}
.布局中间{
显示器：flex；
弹性：1；
}
.布局阶段{
flex:10320px；
背景#ffc94e；
}
.左布局，
.布局权{
flex:0320px；
背景：c9ea5d；
}
.左布局{
背景：#85d6e4；
overflow-y:auto；/*添加此*/
}
.版面标题{
高度：100px；/*必须为100px*/
背景#92e4c9；
}
.版面页脚{
高度：150px；/*必须为150px*/
背景#f7846a；
}

面板标题
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
实体
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
实体
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
0:bg
阶段
正确的
页脚
（也适用于Firefox）

我做了3个改变：

1）我已将身体高度设置为所需高度：

body {
  height: 100vh;
}

2）我给左容器提供了右装箱模型：

.layout-left, .layout-right{
  display: flex;
  flex-direction: column;
}

3）为了防止面板在Firefox上溢出，我添加了以下内容：

div {
  min-height: 0;
}

Mozilla的flex模型开发人员在中解释了最后一个设置。当然，您最好只在相关的父div上设置它，但这更简单。
但是设置最大高度意味着我必须假设用户的屏幕大小，我希望它是动态的。我需要布局中间始终是：。布局中间高度=浏览器窗口的高度-（页眉高度+页脚高度）如果最大高度以vh表示，而不是以px表示，则它始终使用浏览器窗口的相同百分比，使布局具有足够的动态性，但元素之间保持相同的比例。您能给我展示一个使用代码笔的示例吗？我不能让它工作……让我注册吧，我从来没用过。@glasses:完成。现在，除了边界之外的所有内容都用vh表示，并且似乎在codepen小窗格的限制范围内工作：是或者你在追求什么？尝试从布局中删除（最大高度：100vh）。middleOP，你已经设置了一个悬赏，为什么不查看答案（如果仍然有问题，可能还会评论）？