在 IE11 中，Flex 父级未扩展到子级宽度答案

【问题标题】：Flex parent is not expanding to children width in IE11在 IE11 中，Flex 父级未扩展到子级宽度
【发布时间】：2018-04-06 05:23:50
【问题描述】：

我正在制定一个时间表。我通过添加时间槽并在 flex 父级中给它们一个固定的宽度来做到这一点。在 Chrome、FF 和 Safari 中，除了 IE11 之外，这是有效的。

问题在于 IE 11 没有将 flex 父级缩放到其子级宽度。

我做了一个codepen，解释一下，红色部分是滚动时在IE11中缩放到全宽。

https://codepen.io/anon/pen/eMjQJq

HTML

   <div class="c-time-table__scrollable">
      <div class="c-time-table__wrapper">
        <div class="c-time-table__row">
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
          <div class="c-time-table__item">test</div>
        </div>
      </div>
    </div>

SCSS

$component: 'c-time-table';
.#{$component} {

  &__scrollable {
    overflow-x: auto;
    display: flex
  }

  &__wrapper {
    display:flex;
  }

  &__row {
    display:flex;
    background: red;
  }

  &__item {
    flex: 0 0 200px;
    width: 200px;
  }

}

【问题讨论】：

IE 不完全支持 Flex。如果您真的想支持它，如何使用脚本修复它？

标签： css flexbox

【解决方案1】：

IE 11 不完全支持 CSS flexbox。请参考https://caniuse.com/#search=flex

【讨论】：

【解决方案2】：

您可能想尝试使用 -ms-prefixes。最简单的方法是使用支持该功能的预处理器编译 CSS，例如 Koala 或 Prepros。

【讨论】：