我有一个 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
最佳答案
可能与这个 Chromium 错误有关: https://code.google.com/p/chromium/issues/detail?id=247963
它似乎也出现在 Firefox Developer 版本中。
关于html - 绝对定位容器中的 Flexbox - 宽度是最宽列的宽度,而不是所有内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33541720/