Сгибать элементы не правильно заполнены в IE

Question

Вот моя скрипка: Скрипка

есть обертка с фиксированной высотой. раздел содержимого должен растянуться и заполнить пробел, как в скрипте.

, но проблема в IE, он сломан.

Я пробовал flex: 1 0 auto; уже включен обертка контента, но без удачи.

<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>

есть идеи?

Answer 1

, чтобы ваш ребенок-флекс не отрастал, вы можете установить flex-shrink и увеличить его до 0

обновления, необходимого для работы (по крайней мере, до IE11): .field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}

jsfiddle demo: https://jsfiddle.net/xygsmawh/ для тестирования и запуска в IE11 https://jsfiddle.net/xygsmawh/embedded/result, css, html, js

, чтобы продемонстрировать в другом браузере, что исправление безвредно:

.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>