CSS Flexbox 应用程序布局问题

Question

我一直在使用两个单独的代码笔，一个用于网站的主布局，效果很好，第二个是我想在主布局的左侧边栏中添加的组件。

当在具有设定高度的容器内时，该组件可以完美运行，如果在这种类型的父 div 内，它将按照我想要的方式收缩和拉伸。

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

这里是我所说的代码笔：

主布局工作：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

您当前设置了.layout-header、.layout-middle 和.layout-footer 来填充可用的垂直空间，问题是.layout-left 内的内容长度。有几种方法可以阻止 .layout-left 的内容溢出容器。

溢出方法

通过将.overflow-y: auto; 添加到.layout-left，您可以确保在滚动条的内容长于其高度时显示滚动条，从而阻止内容溢出。

.panel {
  display: flex;
  flex-flow: column;
  /*padding: 1em;*/
  overflow: hidden;
  flex: 1;/*Add this*/
}
header {
  min-height: 32px;/*Add this*/
  height: 32px; /*must be 32px*/
  background: #c0c0c0;
}
footer {
  background: #cfcfcf;
  height: 32px;/*must be 32px*/
}
.select-list {
  /*flex: 1;*/
  overflow-y: scroll;
  /*max-height:16vh; Remove this*/
}
.select-list-item {
  background: white;
  border: 1px solid black;
  height: 32px;/*must be 32px*/
}

/*===============================================*/
body {
  display: flex;
  min-height: 100vh;
  max-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;
  overflow-y: auto;/*Add this*/
}
.layout-header {
  height: 100px;/*must be 100px*/
  background: #92e4c9;
}
.layout-footer {
  height: 150px;/*must be 150px*/
  background: #f7846a;
}

<div class="layout-header">
  <h1></h1>
</div>
<div class="layout-middle">
  <div class="layout-left">
    <!-- start content -->
    <div class="panel">
      <header>panel header</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <div class="panel">
      <header>Entities</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <div class="panel">
      <header>Entities</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <!-- end content -->
  </div>
  <main class="layout-stage">
    <h2>stage</h2>
  </main>
  <aside class="layout-right">
    <h2>right</h2>

  </aside>
</div>
<div class="layout-footer">
  <h2>Footer</h2>
</div>

http://codepen.io/anon/pen/gppPrp

弹性法

通过将display: flex; 和flex-direction: column; 添加到.layout-left，您可以获得其内容以适合可用空间。

.panel {
  display: flex;
  flex-flow: column;
  /*padding: 1em;*/
  overflow: hidden;
  flex: 1;/*Add this*/
}
header {
  min-height: 32px;/*Add this*/
  height: 32px;/*must be 32px*/
  background: #c0c0c0;
}
footer {
  background: #cfcfcf;
  height: 32px;/*must be 32px*/
}
.select-list {
  /*flex: 1;*/
  overflow-y: scroll;
  /*max-height:16vh; Remove this*/
}
.select-list-item {
  background: white;
  border: 1px solid black;
  height: 32px;/*must be 32px*/
}

/*===============================================*/

body {
  display: flex;
  min-height: 100vh;
  max-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;
  display: flex;/*Add this*/
  flex-direction: column;/*Add this*/
}
.layout-header {
  height: 100px;/*must be 100px*/
  background: #92e4c9;
}
.layout-footer {
  height: 150px;/*must be 150px*/
  background: #f7846a;
}

<div class="layout-header">
  <h1></h1>
</div>
<div class="layout-middle">
  <div class="layout-left">
    <!-- start content -->
    <div class="panel">
      <header>panel header</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <div class="panel">
      <header>Entities</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <div class="panel">
      <header>Entities</header>
      <div class="select-list" id="select-list">
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
        <div class="select-list-item selected">0: bg</div>
      </div>
      <footer></footer>
    </div>
    <!-- end content -->
  </div>
  <main class="layout-stage">
    <h2>stage</h2>
  </main>
  <aside class="layout-right">
    <h2>right</h2>

  </aside>
</div>
<div class="layout-footer">
  <h2>Footer</h2>
</div>

http://codepen.io/anon/pen/qddEoz

Answer 2

Fixed CodePen（也适用于 Firefox）

我做了 3 处更改：

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

body {
  height: 100vh;
}

2)我给左边的容器赋予了右边的拳击模型：

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

3) 为了让面板不会在 Firefox 上溢出，我添加了这个：

div {
  min-height: 0;
}

最后一个设置在this question 中由一位在 Mozilla 开发 flex 模型的开发人员解释。当然你最好只在相关的父 div 上设置它，但这更简单。

Answer 3

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

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

Answer 4

.layout-left 需要 display: flex; 和 flex-flow: column; 我还添加了一个带有 display: flex; flex-direction: column; height: 100vh; 的 .container 包装器，并从正文中删除了大多数属性。分叉笔：http://codepen.io/oosby/pen/GJJqvP