“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中，行为符合要求：

  

弹性项目的默认弹性行为已更改。在互联网上   Explorer 10，不适合其容器的弹性项目溢出   容器的边缘或夹在边缘的边缘   容器。从IE11开始，这些项目现在缩小以适应他们的   容器（最大宽度值，如果指定）。使用   flex-shrink属性可以改变这种行为。

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

Answer 2

  

问题：

div {
    box-sizing: border-box;
}

.cell {
    flex: 0 0 auto;
}

  

解决方案：

如果您不想更改css的这一部分，我建议您避免设置宽度，而不是设置min-width

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

Answer 3

这是我提出的解决方案......根本不使用Flex。

<强>更新 简化了CSS以更好地处理边距和填充。当您单击按钮使单元格变大时，由于容器的宽度固定，行与容器之间无边距 强>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;