CSS Flexbox应用布局问题

Question

我有两个独立的代码,我一直在使用,一个是网站的主要布局,工作正常,第二个是我想在主要布局的左侧边栏内添加的组件.

当在具有设定高度的容器内部时,该组件完美地工作,如果在这种类型的父div内,它将按照我想要的方式收缩和伸展.

当我将组件添加到主布局中时,它会扩展左侧边栏,打破完美的布局,我希望主布局为当前浏览器窗口的大小,并且页面永不滚动.有没有办法告诉这些侧边栏" .layout-left"" .layout-stage"和" .layout-right"不要扩展？

这是我正在谈论的codepens:

主要布局工作:http://codepen.io/AlexBezuska/pen/KwOagy

工作侧边栏:http://codepen.io/AlexBezuska/pen/ZYgWYp

合并(不工作):http://codepen.io/AlexBezuska/pen/LEwGJj

我正在使用的布局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;
}

Answer 1

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

在这种情况下，您还需要max-height为元素设置 a ，至少为layout-middle。