div being pushed down in flexbox

Question

I want to prevent green div (.c) being pushed down, outside the container.

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

Possible duplicate: http://stackoverflow.com/questions/20977390/set-flexbox-children-to-have-different-heights-to-use-up-available-space — chinaowl, Jan 21 '16 at 22:53

score 1 · Answer 1 · answered Jan 22 '16 at 11:45

Its

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>

div being pushed down in flexbox

1 Answers1