格被推下来Flexbox的

Question

我想阻止绿格（.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>