Issue Description
IE10 and 11 has a flexbox bug where the child flex items overflow the container if they don’t have specified widths.
Pain. In. The. Butt.
Issue Location
omegaplastics.cargo
Code Snippets
.slider-accreds {
}
.accreds--list {
align-items: center;
display: block;
display: flex;
flex-wrap: nowrap;
justify-content: center;
@media only screen and (max-width: 650px) {
flex-wrap: wrap;
}
}
.accreds--item {
display: block;
margin: 0;
max-width: 30%;
&:nth-child(2) {
margin-left: 3%;
margin-right: 3%;
}
@media only screen and (max-width: 650px) {
margin: 1em;
max-width: 100%;
}
@media only screen and (min-width: $wrap-restrict) {
max-width: 100%;
}
img {
display: block;
margin: 0 auto;
}
}How to Fix the Issue
Working through the references, the only solution was to add a set width (in this case <code>max-width: 30%</code>) and then knocking it off once the window is big enough.
Fixed Code Snippets
.accreds--item {
display: block;
margin: 0;
max-width: 30%;
@media only screen and (max-width: 650px) {
margin: 1em;
max-width: 100%;
}
@media only screen and (min-width: $wrap-restrict) {
max-width: 100%;
}
}