html - 绝对定位容器中的 Flexbox - 宽度是最宽列的宽度，而不是所有内容

Question

我有一个 flexbox，它水平环绕在一个绝对定位的 div 中。 flexbox 显示正确，但它的 offsetWidth 是基于最宽列的宽度，而不是整个内容。

如果包含的 div 具有 position: relative，则不会发生这种情况。

有没有办法让这个设置返回正确的宽度，只用 css？该组需要放在右边，这个问题意味着它没有正确放置。我还将宽度用于其他一些操作。

---

浏览器:我在 Chrome 46 和 FF Dev Edition 43 上看到这个。IE11 显示正确。

---

我目前正在使用 javascript 解决这个问题，但这并不理想，它以我不希望它没有的方式限制了 flexbox 的行为。

jsfiddle 在这里:https://jsfiddle.net/jonfagence/2qtkandt/8/ - 显示内容位置不当。

div {
  position: absolute;
  right: 1em;
}
    
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 3em;
}
    
li {
  display: block;
  padding: 0 10px;
}
    
li.double-height {
  height: 3em;
  font-size: 2em;
}

<div>
  <ul>
    <li>Value 1</li>
    <li>Value 2</li>
    <li class="double-height">Value 3</li>
    <li>Value 4</li>
    <li>Value 5</li>
  </ul>
</div>

不要认为它与这个问题是同一个问题(一方面，flexbox 显示正确)，但可能相关:Absolutely positioned flexbox doesn't expand to fit contents

Answer 1

可能与这个 Chromium 错误有关: https://code.google.com/p/chromium/issues/detail?id=247963

它似乎也出现在 Firefox Developer 版本中。