jquery - 为什么 Chrome 无法正确处理使用 jQuery 添加的 flexbox 元素？

Question

当我注意到 Chrome 在我添加 flex 元素并且容器的方向设置为 column 时表现出奇怪的行为时，我正在编写一些基本的 flexbox 代码。或 column-reverse .这是一个简单的 flexbox 示例，它在方向设置为列并环绕时正常工作:

#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 元素(几乎就像重绘或重新计算布局一样)。例如，这里我在插入新元素后快速更改 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>

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

那么，为什么 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>