How do I grow css flexbox items?

hoodedvul

The demo code used below:

...
 .container {
        height: 500px;
        margin-top: 50px;
        padding: 20px 0;
        background-color: brown;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
      }

      .item {
        width: 50px;
        padding: 10px;
        margin: 10px;
        background-color: burlywood;
        text-align: center;
        font-size: 30px;
      }

      .item-1 {
        order: 2;
      }

      .item-5 {
        order: -3;
        flex-grow: 1;
      }
...

The result is:

As the browsers size increases so does the width of item-5, the other items remain the same size.

There is also a flex-shink CSS property. The flexbox CSS properties have short forms similar to other CSS properties.