IE 10 flex，margin-left：自动将项目推出 flex 容器

Question

我有一个容器可以容纳： - 具有特定宽度 (50px) 并向右浮动的 div。 - 上述div前的一个按钮，表示容器内的剩余宽度。

<div class="responsive-button__container">

  <button>Retarded Button</button>

  <div class="awesome-logo"></div>

</div>

CSS：

.responsive-button__container {
  width: 500px;
  border: 3px solid black;
  display: flex;
  display: -ms-flexbox;
}

button {
  width: 100%;
}

.awesome-logo {
  margin-left: auto;
  width: 50px;
  background: red;
}

它在 Chrome、Safari 和 Firefox 上运行良好。但是在 IE 10 上中断（应该浮动在右侧的 div 显示在容器外）

Codepen：https://codepen.io/d30jeff/pen/GxZPXw

编辑：我决定使用 javascript 来减小按钮大小，这样.awesome-logo 就不会同时被推出容器。

Answer 1

我不会为带有 flex 容器的按钮使用 100% 的宽度。 Flex 应该自己管理项目的宽度。如果您没有定义宽度，而是允许调整其大小，它应该可以工作：

button {
  flex-grow:1;
}

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

Answer 2

flex 的默认值已更改：在 IE10 (*) 中为 flex: 0 0 auto;，但现在为 flex: 0 1 auto; (**)。

(*) 如第一版 CSS Flexbox 布局规范中所述
(**) 在 REC 规范的第三个和最后一个版本中（在现代浏览器中实现的那个）

它被称为flexbug #6（很好的资源）。
如果您支持 IE 10，则相关：永远不要将 flex-basis 写为 0，始终写为 flex-basis: 0%; 或 flex: (unitless positive number) (unitless positive number) 0%;。

⇒ Codepen
编辑：属性和值的名称在不同版本的规范之间发生了很大变化，我没有使用 Autoprefixer 在我的示例中“翻译”它们，嗯。现在添加到 Codepen 和下面的 sn-p 中：

/* EDIT : Now with an Autoprefixer go-through via Codepen: activated Autoprefixer on Codepen, viewed the compiled CSS and copy-pasted it back in CSS. There now have all the prefixed properties and values for IE10. I guess. */
.responsive-button__container {
  width: 500px;
  border: 3px solid black;
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
}

.responsive-button__container > * {
  /* flex: 0 0 auto; IE 10 default value (none in disguise, in the 1st version of the spec) */
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto; /* modern default value (in the spec that went to REC) */
}

button {
  width: 100%;
}

.awesome-logo {
  margin-left: auto;
  width: 50px;
  background: red;
}

<div class="responsive-button__container">
  
  <button>Badly displayed button</button>
  
  <div class="awesome-logo"></div>
  
</div>