Flex 项目在 IE 中未正确填充答案

【问题标题】：Flex items not filling correctly in IEFlex 项目在 IE 中未正确填充
【发布时间】：2020-03-06 06:58:06
【问题描述】：

这是我的小提琴：Fiddle

有一个固定高度的包装器。内容部分应该像小提琴一样伸展并填补空白。

但问题出在 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>

有什么想法吗？

【问题讨论】：

最好的办法是不支持IE。
@KrzysztofAN 你是对的，但有时我们没有那么奢侈。
stackoverflow.com/questions/56669644/… 会帮助你吗？
@G-Cyrillus 不确定，试过了，但似乎我无法弄清楚
好的，我会用更新的 jsfiddle 来回答

标签： html css flexbox

【解决方案1】：

为了避免你的 flex child 长疯了，你可以设置 flex-shrink 和 grow 为 0

需要更新才能工作（至少 IE11）：.field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}

jsfiddle 演示：https://jsfiddle.net/xygsmawh/ 在 IE11 中测试和运行 https://jsfiddle.net/xygsmawh/embedded/result,css,html,js

sn-p 在其他浏览器中证明该修复是无害的：

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

【讨论】：