嵌套Flexbox容器宽度的不同浏览器行为

Question

我正在努力为不同浏览器中的flexbox布局获取相同的行为（永远不要使用不支持flexbox的浏览器）。

这是标记：

<!-- nested version -->
<div class="flex-container"> <!-- display: flex -->
  <div>
    <div class="flex-container inner"> <!-- display: flex -->
      <div class="auto-width">
        auto take up needed space
      </div>
      <div class="flex-width"> <!-- flex: 1 -->
        flex take up remaining space
      </div>
    </div>
  </div>
</div>

我的问题是IE11与Firefox和Chrome的行为不同。我希望嵌套的flexbox flex-container.inner的宽度不受限制，因为我现在可以设置任何宽度。

这是一个用于说明问题的JSBin：http://jsbin.com/pabesaci/5。示例3是有问题的，在IE中呈现不同。

在IE中渲染

在Chrome中渲染（FF类似）

这是IE中的错误吗？

您能否提出其他方法来实现此布局？

Answer 1

<p>My example:</p>

<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
  <div>
    <div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
      <div style="float:left; display: block; border: solid 2px green;">
        auto take up needed space
      </div>
      <div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
       flex take up remaining space
      </div>
    </div>
  </div>
</div>