How to remove horizontal scrollbar in flexbox appearing on Firefox and IE

Question

So I am trying to work on a site but on firefox and IE the last section with 3 images has horizontal overflow while there is none on Chrome. I divided that article area into a flexbox so I thought it would handle the overflow and resize it to fit, which chrome seems to do but firefox and IE don't? The last section i'm having trouble with is .other . Here's my css setting up the initial layout and css pertaining to the .other section and article section:

body {
  display: flex;
  flex-direction: column;
  width: 100%;
}
main {
  display: flex;
  flex-direction: row;
  flex: auto;
}
article {
  flex: 2;
  overflow-y: auto;
}
aside {
  flex: 1;
  overflow-y: auto;
}
article {
  display: flex;
  flex-direction: column;
}
.other {
  display: flex;
  flex-direction: row;
  margin-top: 70px;
  margin-bottom: 50px;
  align-items: center;
}
.fitness,
.education,
.pastimes {
  flex-shrink: 1;
}

http://173.246.106.179/test.html

Answer 1

Maybe you have stripped it out for our convenience.. but are you using an auto prefixer at all? If not, this might be why you are seeing different behaviours across browsers.

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */ 

If you are using LESS there is a nice flexbox mixin library https://gist.github.com/jayj/4012969

Always worth checking http://caniuse.com/#feat=flexbox too in case the browser you are testing on doesn't support flexbox yet. Coverage is quite good if you use vendor prefixes.