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

它的

<div>

＆＃13;

＆＃13;

section {
   flex-wrap: no-wrap
 }

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;