[FIXED] How do I get this layout (using CSS flexbox)?

Issue

I have the following markup:

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

And I'm trying to figure out what CSS I need to add in order to get the content area to fill up whatever vertical space isn't taken up by the strip or the footer.

Please note that the container is position: fixed with top: 0 and bottom: 0 so that the container takes up 100% the height of the browser window. Also, the strip has a set height, but the footer does not (nor can it, as the content is somewhat dynamic). However, I want the footer to take up the minimum amount of space required and have the content area fill up the rest of the vertical space on the page.

I'm thinking that I need to use flexbox to do this, but I'm not sure.

Here's the CSS I have thus far:

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Solution

I hope this is what you wanted :) Without width or right set your container will basically have 0 width. .strip is positioned at the start of the container and .footer at the end. .content is allowed to stretch but won't stretch more than his neighbors without the flex-grow property which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}

.strip {
  justify-self: flex-start;
  background: red;
  height: 5px;
}

.content {
  justify-self: stretch;
  background: blue;
  flex-grow: 1;
}

.footer {
  justify-self: flex-end;
  background: yellow
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

Answered By - The24thDS

Answer Checked By - Clifford M. (PHPFixing Volunteer)