Question

我正在建立一个时间表。我这样做是通过添加时隙并在flex父级中给它们一个固定的宽度。在Chrome，FF和Safari中，这是有效的，IE11除外。

问题是IE 11没有将flex父级扩展到它的子宽度。

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

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

}

Answer 1

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

Answer 2

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

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

2 个答案: