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

Question

我有一个在绝对定位的 div 内水平环绕的 flexbox。 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 开发者版中。