justify-content and flex-grow being ignored

Question

I'm having a problem with CSS flexbox. I had a working code yesterday yet today when I tested my solution it stopped working for some reason. It has to do with flexbox.

This is the result I want to have:

1. To be able to position the content with justify-content. This fails
2. Content should take all the available space so it has flex-grow: 1. This fails, as well.
3. The footer should be at the bottom since the content would push it down by taking all the available space thanks to flex-grow: 1. This fails.

It seems that whole flexbox stopped working correctly for me.

I believe the problem is that for some reason flexbox does not even respond correctly to this:

`justify-content: flex-start`

If I try any other values there like center, flex-end, etc nothing happens.

Funny thing is that yesterday flexbox was behaving correctly, I could position it around with justify-content and today I can't.

What am I missing here why is not at least justify-content: flex-end or justify-content: center doing behaving correctly and positioning the content?

If I fix the problem that causes justify-content to stop working I believe flex-grow will also work.

Does anyone have an idea why it's misbehaving?

I can get flex to behaving using this playground so I know my code should be working, My code above is exactly what I did here in the playground: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

.ikigai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header, .footer {
  height: 80px;
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

https://jsfiddle.net/re01pn2x/

Answer 1

Your flex container has no height defined.

Therefore, it defaults to height: auto (content-driven height).

Add this to your code:

.ikigai {
   height: 100vh;
}

.ikigai {
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */ /* default value; not necessary */
  height: 100vh;
}

.header, .footer {
  height: 80px;
  flex-shrink: 0; /* optional; if you don't want items to shrink vertically */
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}

body {
  margin: 0; /* override default margins; prevents vertical scrollbar */
}

<div class="ikigai">
  <div class="header">this is a header</div>
  <div class="content">content</div>
  <div class="footer">footer 12</div>
</div>

More details: How to make div 100% height of the browser window?

---

justify-content

Note that justify-content wasn't working in your code because there was no free space available. This property works by distributing free space in the container. In this case, because the container was defaulting to height: auto, there was only enough space to accommodate the content.

justify-content & flex-grow

Also note that even with a height defined that creates extra space, justify-content will not work if you use flex-grow. Why? Because flex-grow will consume that free space, again leaving no space for justify-content to distribute.

Answer 2

You can fixed using height:100vh;

.ikigai {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100vh;
}

.header, .footer {
  height: 80px;
  margin: 10px;
  border: 1px dashed lightgray;
}

.content {
  margin: 10px;
  border: 1px dashed lightgray;
  flex-grow: 1;
}