"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中增长.检查小提琴并单击按钮以更改单元格的宽度.边框有助于可视化行为.下图显示了预期的行为(顶部)以及Internet Explorer如何解释它(底部):

这是什么类型的错误(无法从flexbug列表中找到它)以及如何使它在Internet Explorer中工作？

Answer 1

这是我想出的一个解决方案...它根本不使用 Flex。

更新： 简化了 CSS 以更好地处理边距和填充。当你点击按钮让单元格变大时，由于容器的宽度是固定的，所以行和容器之间没有边距。

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

html, body { width: 100%; height: 100%; margin:0; padding:0; }
div {
   border: 1px solid black;
   /*    box-sizing: border-box; */
}

.container {
   width: 400px;
   padding: 5px;
   margin:10px;
   background: green;
   overflow: auto;
}
.container::after, .row::after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   width: 0;
   clear:both;
}

.row {
   min-width: calc(100% - 22px);
   padding: 5px;
   margin: 5px;
   border-color: red;
   background: pink;
   float:left;
}
.container > *:last-child {
   /*    margin: 0; */
}

.cell {
   padding: 5px;
   margin:5px;
   border-right: 1px solid black;
   overflow: hidden;
   width:  calc(200px - 22px);
   background: orange;
   float: left;
}

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