div 在 flexbox 中被按下答案

【问题标题】：div being pushed down in flexboxdiv 在 flexbox 中被按下
【发布时间】：2016-01-22 19:45:08
【问题描述】：

我想防止绿色 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

【问题讨论】：

可能重复：stackoverflow.com/questions/20977390/…
只需将flex-wrap 属性更改为no-wrap

标签： html css flexbox

【解决方案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>

【讨论】：