I've been working on a website and encountered an issue with horizontal overflow on Firefox and IE in the last section that contains 3 images, while Chrome seems to display it correctly without any overflow. I used a flexbox for the article area, assuming it would handle the overflow and resize it accordingly, which works on Chrome but not on Firefox and IE. The problematic section is referred to as .other. Below are the CSS settings for the initial layout and the sections .other and article:
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;
}