2

I have a flexbox grid layout that has one tall image in one column and two shorter images stacked on top of each other in another column.

This is what it looks like it Chrome:

This is what it looks like it Chrome.

In Internet Explorer, the height of the two smaller nested images/divs get stretched to the first column's height.

Image here.

How do I make the column with two nested images keep their 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 {
  max-width: 1440px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 5.21%;
  padding-top: 80px;
  padding-bottom: 0;
}

.executive-container .box {
  margin-bottom: 20px;
  -ms-flex-order: 1;
  order: 1;
}

.executive-container .box .box-inner {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
}

.resimg {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.executive-container .box .board-member {
  position: relative;
}

.executive-container .box .board-member .board-member-details {
  width: 66%;
  position: absolute;
  bottom: 0;
  left: 0;
  color: red;
  padding: 20px;
  font-size: 1.8rem;
  letter-spacing: 0;
  font-weight: normal;
  font-style: normal;
  line-height: 2.9rem;
  font-weight: 700;
  line-height: 2.1rem;
  letter-spacing: -0.02em;
}
<div class="grid executive-container">
  <div class="box col-4 heading">
    <h3>Executive<br>Leadership<br>Team</h3></div>
  <div class="box col-12_sm-6_md-4">
    <div class="board-member">
      <div class="board-member-details">
        <div class="board-name">Caption</div>
      </div>
      <img src="http://via.placeholder.com/821x1125" alt="" class="resimg portrait-desktop">
    </div>
  </div>
  <div class="box col-4">
    <div class="box-inner">
      <div class="board-member">
        <div class="board-member-details">
          <div class="board-name">Caption</div>
        </div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div>
      <div class="board-member">
        <div class="board-member-details">
          <div class="board-name">Caption</div>
        </div><img src="http://via.placeholder.com/819x536" alt="" class="resimg"></div>
    </div>
  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Kristyn
  • 31
  • 3
  • My goto sources when dealing with flexbox bugs are: 1) http://caniuse.com/#search=flexbox (and click on known issues tab at the bottom) and 2) https://github.com/philipwalton/flexbugs I don't have access to IE at the moment so I cannot try things out. But these resources have helped me in the past fix IE flexbox issues. – flyer Aug 11 '17 at 04:07

1 Answers1

0

This helped! Flexbox on IE11: image stretched for no reason?

I set flex-shrink: 0 on the flex-child and it solved the problem in IE.

Kristyn
  • 31
  • 3