html - 嵌套 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>