为什么 Chrome 不能正确处理使用 jQuery 添加的 flexbox 项目？

Question

我正在编写一些基本的 flexbox 代码时，我注意到 Chrome 在我添加 flex 项并且容器的方向设置为 column 或 column-reverse 时表现出奇怪的行为。这是一个简单的 flexbox 示例，说明在将方向设置为 column 并换行的情况下正常工作：

#flexbox_container {
    border: 8px solid #ccc;
    padding: 10px;
    height: 200px;
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
}
.flex_item {
    background: #eee;
    margin: 4px;
    padding: 10px;
}

<div id="flexbox_container">
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
    <div class="flex_item">Item</div>
</div>

正如预期的那样，当列数变得太大而无法容纳容器时，会创建第二列，每个项目的宽度都相同。

现在这里是问题的一个例子。如果我们从一列的子 flex 项目开始，并使用 jQuery 继续添加更多，而不是像上面那样将它们平均划分，第一列占据了整个宽度，并且新项目从侧面伸出：

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>

然后让我感到困惑的是，如果我摆弄几乎任何 CSS 属性，我可以让 Chrome 排成一行并按照我的预期显示弹性项目（几乎就像重绘或重新计算布局一样）。例如，这里我在插入新项目后快速更改 flex 项目的位置：

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
  $('.flex_item').css('position', 'absolute')
  setTimeout(function() {
    $('.flex_item').css('position', 'relative')
  }, 0)
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>

现在这显然是一种解决问题的方法，每次添加新项目时都会导致难看的闪烁。

那么，为什么 Chrome 在使用 jQuery 插入 flex 项目时不能正确显示它们，而无需求助于快速修改 CSS 属性之类的方法？

请注意，Firefox 和 Edge 都没有这个问题并且按预期工作，添加 -webkit- 前缀不会改变结果。此外，这似乎只在flex-direction 设置为column 或column-reverse 时发生。当它设置为row 或row-reverse 时，它工作正常。

Answer 1

有趣。您可以通过添加以下样式来解决此问题：

#flexbox_container {
  overflow: auto;
}

#flexbox_container::-webkit-scrollbar {
  height: 0;
}

花了一段时间才弄清楚滚动条的高度需要为0。

单独使用overflow，Chrome 似乎做了以下事情：

1. 添加一个元素。
2. 如果需要，添加滚动条。
3. 意识到这是一个 flexbox，它不需要滚动条。
4. 将列中的最后一个元素错误地定位到下一列的顶部。

去掉滚动条 CSS 看看我在说什么。

$('button').click(function() {
  $('#flexbox_container').append('<div class="flex_item">Item</div>');
})

#flexbox_container {
  border: 8px solid #ccc;
  padding: 10px;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}
#flexbox_container::-webkit-scrollbar {
  height: 0;
}
.flex_item {
  background: #eee;
  margin: 4px;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="flexbox_container">
  <div class="flex_item">Item</div>
</div>
<button>button</button>