I am facing an issue with my flexbox grid layout where one column contains a tall image while another column has two shorter images stacked on top of each other. The problem arises when viewing the layout in Internet Explorer, as the height of the smaller nested images/divs gets stretched to match the height of the first column.
How can I ensure that the column containing the two nested images maintains its own height?
h3 {
margin-bottom: 20px;
}
.grid {
box-sizing: border-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-left: -10px;
margin-right: -10px;
}
.col-4 {
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
flex-basis: 33.33333%;
max-width: 33.33333%;
}
.executive-container {
<!-- styles removed for brevity -->
}
.resimg {
width: 100%;
height: auto;
vertical-align: bottom;
}
.executive-container .box .board-member {
position: relative;
}
<!-- more CSS code here -->
<!-- html structure code here -->