using flexbox and scaling images and stay on the same line

I have the following jsfiddle.

Notice how when the images scale, they don't stay on the same line. How can I use flexbox to scale the images so that they stay on the same line as the browser resizes.

See code below: http://codepen.io/jasmine1233333/pen/NNBVZe

CSS:

.npwfu-example-shell {
    overflow: hidden;
    min-width: 1100px;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.npwfu-example-shell .example-grid {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.5s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    flex-flow: nowrap;
    backface-visibility: hidden;
}

.create-option {
    flex: 0 0 auto;
    max-width: 20%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0.5%;
    cursor: pointer;
    display: inline-block;
    vertical-align: bottom;
    backface-visibility: hidden;
}

.create-option-thumb {
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-shadow: 0px 1px 3.36px 0.14px rgba(0, 0, 0, 0.14);
    transition: transform 0.5s ease-in;
    backface-visibility: hidden;
}

.create-option-thumb-img img {
    width: 100%;
    height: auto;
    z-index: -1;
}

.create-option-label {
    padding: 0px;
    color: #82919b;
    font-size: 1.38em;
    font-weight: 400;
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 1.1em;
}