css - "inline-flex"元素在 Internet Explorer 中不随其内容增长

Question

我有一个由 div 组成的简单表格结构:

$(document).ready(function() {
  $("button").on("click", function() {
    $(".cell").outerWidth(500);
  })
})

div {
  border: 1px solid black;
  box-sizing: border-box;
}

.container {
  width: 400px;
  height: 100%;
  padding: 5px;
  overflow: auto;
}

.row {
  min-width: 100%;
  width: auto;
  display: inline-flex;
  padding: 5px;
  margin-bottom: 5px;
  border-color: red;
}

.cell {
  flex: 0 0 auto;
  border-right: 1px solid black;
  overflow: hidden;
  min-width: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
  </div>
  <div class="row">
    <div class="cell">x</div>
  </div>
</div>
<button type="button">Change width</button>

行需要垂直堆叠，每行都具有其内容的(未知)高度，并且至少与容器一样宽。如果内容不适合，容器必须滚动。单元格的宽度将使用 JS 以交互方式更改，并且行应扩展以适合整个内容。因此，行具有以下样式:

.row {
  min-width: 100%;
  width: auto;
  display: inline-flex;
}

单元格需要 flex 部分，不在本问题的讨论范围内。作为一个 inline 元素，该行将随着所有主要浏览器中的内容而增长，但在 Internet Explorer 11 中不会。查看 the fiddle然后单击按钮更改单元格的宽度。边界有助于可视化行为。下图显示了预期的行为(顶部)以及 Internet Explorer 如何解释它(底部):

这是什么类型的错误(无法从 the list of flexbugs 弄清楚)，我怎样才能让它在 Internet Explorer 中工作？

Answer 1

在 IE11 中，行为是如愿的:

The default flex behavior of flex items has changed. In Internet Explorer 10, flex items that didn't fit their containers overflowed the margins of the container or clipped to the margins of the container. Starting with IE11, these items now shrink to fit their containers (up to the min-width value, if specified). Use the flex-shrink property to change this behavior.

https://msdn.microsoft.com/en-us/library/dn265027(v=vs.85).aspx

因此，下面的 .cell 规则应该可以解决问题

.cell {
  flex: 0 0 auto;
  -ms-flex: 0 1 auto; /* overwrites the previous rule only in IE11 */
  border-right: 1px solid black;
  overflow: hidden;
  min-width: 200px;
}