0

I am new to flexbox, but I have a parent div which contains three child divs. The three child divs are each 100% width. The first two divs are a fixed height. I want the third child div to fill out the rest of the parent div. 

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
  border: 1px solid blue;
  background-color: gray;
  align-content: flex-start;
}

.flex-item1 {
  width: 100%;
  height: 10px;
  background: yellow;
}

.flex-item2 {
  width: 100%;
  height: 10px;
  border: 1px solid red;
  background: red;
}

.flex-item3 {
  width: 100%;
  border: 3px solid purple;
  background: purple;
  align-self: stretch;
  height: auto;
}


/* another attempt for the third child div */


/*     .flex-item3{
            width: 100%;
            border: 3px solid purple;
            background: purple;
            flex-direction: row;
            flex-grow: 1;
        } */
<div class="flex-container">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>

I have made a jsFiddle here.

Can anyone tell me what I'm doing wrong?

EDIT

I am trying not to make the flex-direction: column since I would like the third child div to be a row.

Rbar
  • 3,740
  • 9
  • 39
  • 69
  • is this what you try to do https://jsfiddle.net/rb987nL7/10/ ? if yes, then use flex-direction and flex for the one child to fill entire space ... might be similar to http://stackoverflow.com/questions/25098042/fill-remaining-vertical-space-with-css-using-displayflex/25098486#25098486 – G-Cyrillus Mar 27 '17 at 14:40
  • @GCyrillus yes this is part of it, but I am trying not to do this with flex-direction: column because that seems to effect the content direction of what I put inside the third child div. is there a way to accomplish this without altering the flex-direction? – Rbar Mar 27 '17 at 15:11
  • why flex child's content should react from it's parent direction ? id doesn't. it behaves as a regular block element and flow of content follows the regular flow, block are stacking on each other and inline elements follows document direction. How come you have a different behavior ? Your example as flex or block will behave the same, 3 elements stacked on top of each others. Flex comess handy where you want to reorder elements, fill up entire space or justify/align items in a specific way Maybe you should rephrase your question and or update your CSS/HTML example. – G-Cyrillus Mar 27 '17 at 18:46
  • Maybe this what you try to do https://jsfiddle.net/rb987nL7/13/ - variant https://jsfiddle.net/rb987nL7/14/ .please clarify – G-Cyrillus Mar 27 '17 at 19:02
  • @GCyrillus YES! This is super helpful and what I was thinking! Thank you! I'd upvote/accept this if I could :) – Rbar Mar 27 '17 at 19:18

1 Answers1

1

use flex:1 in the 3rd item and flex-direction:column in parent

.flex-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 100%
}

.flex-item1 {
  height: 10px;
  background: yellow;
}

.flex-item2 {
  height: 10px;
  background: red;
}

.flex-item3 {
  flex: 1;
  background: blue
}
<div class="flex-container">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • Yessssss ... +1 for speed :) – Asons Mar 27 '17 at 14:41
  • @LGSon thanks, but someone dislike my answer and downvote it, wondering why! – dippas Mar 27 '17 at 14:42
  • Yeah, saw that just now ... well, can't win them all :) – Asons Mar 27 '17 at 14:43
  • Hi, I should have clarified. If I make the flex-direction column, then I believe that it alters the other content inside of the thrid child div (which I would like to still have as row. Does that make sense? – Rbar Mar 27 '17 at 15:09
  • then just set it as `row`, – dippas Mar 27 '17 at 15:10
  • @dippas. Then it doesn't flex – Rbar Mar 27 '17 at 16:26
  • thanks for all of the replies. I appreciate – Rbar Mar 27 '17 at 16:30
  • @dippas/@GCyrillus your original answers plus explicitly setting the display of whatever the third child div contains allows the third child div stretch to the parent div and elements within the third child div to be still formatted by row. Your answers helped a lot. Thank you – Rbar Mar 27 '17 at 19:14