不要在具有复杂布局的CSS Flex框中拉伸一个项目

我正在尝试创建一个嵌套的弹性框布局,可以正确地(垂直地)拉伸所有列.它似乎工作得很好,除了在嵌套布局中拉伸一个项目.

|---------------------------------------------|
|Header                                       |
|---------------------------------------------|
||--------------------------------|----------||
||TITLE IS THE ISSUE!             |Right     ||
||--------------------------------|Aside     ||
||Left    |Content                |          ||
||Aside   |                       |          ||
||        |                       |          ||
||        |                       |          ||
||        |                       |          ||
||--------|-----------------------|----------||
|---------------------------------------------|
|Footer                                       |
|---------------------------------------------|

我遇到的问题是,如果Right Aside比其他内容更长,则Header会垂直延伸.如果我试图覆盖Title align-self属性来阻止它拉伸没有任何反应.

一个清楚地显示问题的plunker.看看灰色区域(标题 – 不得长大)：http://plnkr.co/edit/9VBSOKi0ipAy1QDpNAKb?p=preview

谢谢…

从头开始 – 从内到外构建布局

此布局中有3个嵌套的Flex容器.

#1 – 两个内部列

这些列包含在它们自己的名为.flex-inner-columns的flex父级中. < main>元素可能是这个父母的一个很好的选择.

HTML

<main class="flex-inner-columns">

  <div class="column-left">
    column-left
  </div>

  <div class="column-right">
    column-right
  </div>

</main>

CSS

.flex-inner-columns {
  display: flex;
}    
.column-left {
  flex: 1;
 }
.column-right {
  flex: 2;
 }

#2 – 添加标题

标题和内部列父包含在另一个名为.flex-inner的flex父级中. <节>元素可能是这个父母的一个很好的选择.

HTML

<section class="flex-inner">

  <header class="inner-title">
    <h1>inner-title</h1>
  </header>

  <main class="flex-inner-columns">

    <!-- columns are here -->

  </main>

</section>

CSS

此flex父级的flex方向设置为column.标题是flex：0 1 150px并且不会增长,但如果需要,它将从它的默认高度150px缩小.列flex容器给出flex：1,因此它将增长和收缩.

.flex-inner {
  display: flex;
  flex: 2;
  flex-direction: column;
}
.inner-title {
  flex: 0 1 150px;
  width: 100%;
}
.flex-inner-columns {
  display: flex;
  flex: 1; /* the inner columns flex parent is now given flex 1*/
}

#3 – 最终布局 – 添加外部flex父级

所有东西都包裹在一个最终的外部容器中,该容器控制着右边的列. .flex-inner给出flex：2并且.outer-right旁边给出flex：1.

完整的例子

body {
  margin: 0;
}
.top-header,
footer {
  height: 10vh;
  background: #E91E63;
}
.flex-outer {
  display: flex;
  height: 80vh;
}
.outer-right {
  flex: 1;
  background: #F48FB1;
}
.flex-inner {
  display: flex;
  flex: 2;
  background: #333;
  flex-direction: column;
}
.inner-title {
  background: #9C27B0;
  flex: 0 1 150px;
  align-self: center;
  width: 100%;
}
.flex-inner-columns {
  display: flex;
  flex: 1;
}
.column-left {
  flex: 1;
  background: #CE93D8;
}
.column-right {
  flex: 2;
  background: #AB47BC;
}

<header class="top-header">Header</header>
<div class="flex-outer">

  <section class="flex-inner">

    <header class="inner-title">
      <h1>inner-title</h1>
    </header>

    <main class="flex-inner-columns">

      <div class="column-left">
        column-left
      </div>

      <div class="column-right">
        column-right
      </div>

    </main>

  </section>


  <aside class="outer-right">
    right outer
  </aside>

</div>

<footer>Footer</footer>