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（在现代浏览器中实现的那个）的规范的第3版和最后版本中

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

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

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

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

2 个答案: