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

我正在努力使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>

自动占用所需空间
flex占用剩余空间

我的问题是IE11的行为与Firefox和Chrome不同。我希望嵌套的flexbox

flex container.inner

的宽度不受限制，因为现在我在哪里设置任何宽度

下面是一个JSBin来说明问题：。例3是有问题的一个，在IE中呈现不同

IE中的渲染

使用Chrome渲染（FF类似）

这是IE中的一个bug吗

你能建议其他方法来实现这个布局吗

我的示例：

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

自动占用所需空间
flex占用剩余空间

你的意思是像？@Martinetsalu嗯，不完全是这样，内部flex容器应该只按照其子容器的要求增长（这在我的屏幕截图中并不清楚，但这是FF和Chrome的行为）怎么样？如果你还没有使用它，请查看Normalize.csher特别指出：“你能建议其他方法来实现这个布局吗？”谢谢，@MartinMetsalu。我接受这个回答。我希望使用flexbox的解决方案，但当浏览器表现不一样时，这就不得不这么做了