Why are flexbox child items not stretching to fill parent container (incl. jsfiddle)?

Question

According to the documentation on CSS-tricks, using justify-content: stretch, a flexbox child item should stretch within its container to fill the available space. I have a flexbox container where I set the main axis to be column direction, then in this container I place two div flexbox items. I want them to fill the available vertical space equally (so I believe flex: 0 1 auto should do it).

Here is the JS fiddle:

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 0 1 auto;
}

<div class="container">
  <div class="in">Inside</div>
  <div class="in">
  Inside
  </div>
</div>

but you specified a fixed height .. and it's `flex:1 1 auto` — Temani Afif, Jul 10 '18 at 21:49
no need to specify height since you want it to fill the space, simply consider the `flex` property — Temani Afif, Jul 10 '18 at 22:13

score 0 · Answer 1 · answered Jul 10 '18 at 21:54

As pointed out by @Temani Afif:

body {
  height: 100%
}

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  border: 1px solid grey;
}

.in {
  height: 25px;
  border: 1px solid black;
  flex: 1 1 auto;
}

<div class="container">
  <div class="in">Inside</div>
  <div class="in">
  Inside
  </div>
</div>

Why are flexbox child items not stretching to fill parent container (incl. jsfiddle)?

1 Answers1