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