Flex grow and shrink

When we’re building the grid layout, we need to master another concept of flexbox—grow and shrink.

flex-grow

Grow defines how the items expand to takes the extra spaces. Grow affects the items when there are empty spaces in the container. Grow defines the ratio each item should expand. Given value 1 on all items mean each one of them should take equaly width, or height, depends on the flex-direction.

flex: 1;

flex-shrink

Shrink is how each item should squeeze when the container is smaller. Having value 1 on all items means all items shrinks equally.

flex: 0 1 auto;

Applying grow and shrink

Given the following HTML structure:

<div class="container">
  <header>
    Header goes here.
  </header>
  <main>
    <p>Main content.</p>
    <p>Main content.</p>
    <p>Main content.</p>
    <p>Main content.</p>
    ...
  </main>
  <footer>
    Footer goes here.
  </footer>
</div>

We can make the header and footer shrink to its content height. Then we make the main content auto expand to take up all the spaces.

Our code running in small screen.
Our code running in small screen.
html, body {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header, footer {
  flex: 0 1 auto;
}
main {
  flex: 1;
  overflow: scroll;
  -webkit-overflow-scrolling:touch;
}

You may also find the live code in the following codepen demo.

http://codepen.io/makzan/pen/mJrqzO