Flex-grow does not change the state of an element

Why does flex-grow: 1 not work here? I want the elements to share the whole space and there are no spaces between them. They should be navigation buttons to which you can add one if you need one more. If possible please use flex-box, I would like to understand it.

http://jsfiddle.net/vqL95o0s/1/

CSS

header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }


a.button {
    height: 75px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: black;
}

HTML

        <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>

The boxes stayed in one place at a distance, but did not get any bigger.

You need to set the flex-grow property for the li elements as they are the direct children of the navlist in which you want them to grow.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }

.navlist li{
  flex-grow:1;
}

a.button {
    height: 75px;
    display: flex;
    align-items: center;
    background-color: black;
}

<!-- language: lang-html -->

        <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>

<!-- end snippet -->

The problem is that, you are applying flex-grow property on "a element". You should apply the flex-grow on the direct child of flexbox that is li items. Here is the updated code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }

ul.navlist > li:nth-child(1){
  flex-grow: 1;
}

a.button {
    height: 75px;
    display: flex;
    align-items: center;
    background-color: black;
}

<!-- language: lang-html -->

        <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example 1</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>

<!-- end snippet -->

Here I applied flex-grow to the first li item.

You a tag is inside the li element. This one should fill the space :

li {
    flex:auto;
}

http://jsfiddle.net/dL7nz9xw/

And you don't need the flex-grow: 1;

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

> The alignment is done after the lengths and auto margins are applied,
> meaning that, if in a Flexbox layout there is at least one flexible
> element, with flex-grow different from 0, it will have no effect as
> there won't be any available space.

Remove the justify-content: space-between on your .navlist (or set it back to normal) and set the flex-grow: 1; on your li elements rather than your anchors. Your a are not flex items because they are not the direct children of your ul. Hope it helps.