Flex items not filling correctly in IE

Question

Here's my fiddle : Fiddle

there is a wrapper with fixed height. the content section should stretch and fill the gap like as it is in the fiddle.

but the problem is in IE, it gets broken.

I have tried flex: 1 0 auto; already on content wrapper but w/o luck.

<div class="col">
  <div class="item" style="height: 670px;">
  <div class="view-mode-featured summary-style-visible">
    <div class="front-illustration-image">
      <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <a href="">
              <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">
            </a>
          </div>
        </div>
      </div>
      <div class="group-content-group field-group-div">
        <div class="field field-name-field-title-prefix field-type-text field-label-hidden">
          <div class="field-items">
            <div class="field-item even">Prefix</div>
          </div>
        </div>
        <h2 class="title">
          <a href="" class="node-title-link">
            <div class="field-name-title">
              <div class="">– Text </div>
            </div>
          </a>
        </h2>
        <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">
          <div class="field-items">
            <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekretær Eldar Berli i NJFF.</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

any ideas ?

@KrzysztofAN You're right, but sometimes we don't have that luxury. — Andy Hoffman, Mar 05 '20 at 22:13
would https://stackoverflow.com/questions/56669644/how-can-i-fix-ie-image-and-column-flexbox-bug/56670012#56670012 be helping you ? — G-Cyrillus, Mar 05 '20 at 22:29
@G-Cyrillus not sure, tried it but seems i cant figure it out — Sadeghbayan, Mar 05 '20 at 22:45

score 1 · Accepted Answer · answered Mar 05 '20 at 22:58

to avoid your flex child to grow nuts , you can set flex-shrink and grow to 0

update needed to work (at lest IE11) : .field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}

jsfiddle demo : https://jsfiddle.net/xygsmawh/ to test & run in IE11 https://jsfiddle.net/xygsmawh/embedded/result,css,html,js

snippet to demonstrate in other browser that the fix is harmless:

.field{ flex: 0 0 auto;/* IE11 fix : avoids those extra large empty gaps */}


body{
  background:#ddd;
}
img {
    width: 100%;
}

.col{
  float: left;
  width: 33.33333%;
}


.view-mode-featured {
    height: 100%;
}

.front-illustration-image {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.group-content-group {
    flex: 1;
    flex-direction: column;
    display: flex;
    background:white;
    padding: 1rem;
    border-bottom: 2px solid white;
    display: flex;
    flex-direction: column;
    border-bottom: 2px solid #999999;
}

<div class="col">
  <div class="item" style="height: 670px;">
  <div class="view-mode-featured summary-style-visible">
    <div class="front-illustration-image">
      <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">
        <div class="field-items">
          <div class="field-item even">
            <a href="">
              <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">
            </a>
          </div>
        </div>
      </div>
      <div class="group-content-group field-group-div">
        <div class="field field-name-field-title-prefix field-type-text field-label-hidden">
          <div class="field-items">
            <div class="field-item even">Prefix</div>
          </div>
        </div>
        <h2 class="title">
          <a href="" class="node-title-link">
            <div class="field-name-title">
              <div class="">– Text </div>
            </div>
          </a>
        </h2>
        <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">
          <div class="field-items">
            <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekretær Eldar Berli i NJFF.</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</div>

Flex items not filling correctly in IE

1 Answers1