0

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
J K
  • 4,883
  • 6
  • 15
  • 24
  • Without enough code to reproduce the problem, it's not easy to help you identify and solve the problem. However, glancing at your code, you're using percentage margins on a flex item. The flexbox specification discourages that practice: http://stackoverflow.com/a/36783414/3597276 – Michael Benjamin May 06 '16 at 01:37

1 Answers1

0

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;
}`
codeislife
  • 1,446
  • 1
  • 10
  • 7
  • doesn't help. doesn't work. I have an automated script that adds the ms- to each property automatically – J K May 06 '16 at 01:07