html - div在flexbox中被下推

Question

我想防止绿色 div (.c) 被向下推到容器外。

http://codepen.io/anon/pen/vLpPRM?editors=1100

<section>
 <div class="a">aaaaaaaa</div>
 <div class="b">bbbbb</div>
 <div class="c">ccccccccc</div>
</section>

section
  display: flex
  flex-wrap: wrap
  width: 500px
  height: 200px
  background-color: peru

.a
  width: 400px
  height: 100px
  background-color: gray
.b
  width: 100px
  height: 200px
  background-color: tan

.c
  background-color: green
  height: 100px
  width: 300px

Answer 1

它的

section {
   flex-wrap: no-wrap
 }

section {
  display: flex;
  flex-wrap: no-wrap;
  width: 500px;
  height: 200px;
  background-color: peru;
}

.a {
  width: 400px;
  height: 100px;
  background-color: gray;
}

.b {
  width: 100px;
  height: 200px;
  background-color: tan;
}

.c {
  background-color: green;
  height: 100px;
  width: 300px;
}

<section>
<div class="a">aaaaaaaa</div>
<div class="b">bbbbb</div>
<div class="c">ccccccccc</div>
</section>