min-height and flex in IE

Question

I have an HTML element with the following CSS:

.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
}

Inside the HTML element is a row of 10 of the following elements:

.option {
    flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}

For some reason, in Chrome and Safari the option elements are vertically aligned at the bottom of the examples element, but in IE 11 that is not the case. How do I fix this in IE 11?

Answer 1

try:

`

.option {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    width: 18%;
    max-width: 18%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 1%;
    cursor: pointer;
}
.examples {
    box-sizing: border-box;
    width: 100%;
    margin-left: 80px;
    transition: transform 0.3s;
    transition-timing-function: cubic-bezier(0, 0, 0.26, 0.89);
    will-change: transform;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    align-items: flex-end;
}`