Flex 项目在 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 子元素变得疯狂，你可以设置 flex-shrink 并增长到 0需要更新才能工作（至少 IE11）：.field{ flex: 0 0 auto;/* avoids those extra large empty gaps */}jsfiddle 演示：https://jsfiddle.net/xygsmawh/&nbsp;在 IE11 中测试和运行https://jsfiddle.net/xygsmawh/embedded/result,css,html,js片段以在其他浏览器中证明该修复是无害的：.field{ flex: 0 0 auto;/* IE11 fix : avoids those extra large empty gaps */}body{&nbsp; background:#ddd;}img {&nbsp; &nbsp; width: 100%;}.col{&nbsp; float: left;&nbsp; width: 33.33333%;}.view-mode-featured {&nbsp; &nbsp; height: 100%;}.front-illustration-image {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;}.group-content-group {&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; background:white;&nbsp; &nbsp; padding: 1rem;&nbsp; &nbsp; border-bottom: 2px solid white;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; border-bottom: 2px solid #999999;}<div class="col">&nbsp; <div class="item" style="height: 670px;">&nbsp; <div class="view-mode-featured summary-style-visible">&nbsp; &nbsp; <div class="front-illustration-image">&nbsp; &nbsp; &nbsp; <div class="field field-name-field-main-image field-type-field-collection field-label-hidden">&nbsp; &nbsp; &nbsp; &nbsp; <div class="field-items">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-item even">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://www.imagesource.com/wp-content/uploads/2019/06/Rio.jpg">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; <div class="group-content-group field-group-div">&nbsp; &nbsp; &nbsp; &nbsp; <div class="field field-name-field-title-prefix field-type-text field-label-hidden">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-items">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-item even">Prefix</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <h2 class="title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="" class="node-title-link">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-name-title">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="">– Text </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; </h2>&nbsp; &nbsp; &nbsp; &nbsp; <div class="field field-name-field-intro-text field-type-text-long field-label-hidden">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-items">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="field-item even">– En gledens dag for alle med et bankende hjerte for villaksen, sier generalsekretær Eldar Berli i NJFF.</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div></div>