Question

我有一个水平包裹的弹性箱，位于绝对定位的div内。 flexbox正确显示，但其offsetWidth基于最宽列的宽度，而不是整个内容的宽度。

如果包含的div具有position：relative。

，则不会发生这种情况

有没有办法让这个设置返回正确的宽度，只是用css？该组需要位于右侧，这个问题意味着它没有正确放置。我还使用宽度进行其他操作。

浏览器：我在Chrome 46和FF Dev Edition 43上看到了这一点.IE11正确显示。

我目前正在使用javascript解决这个问题，但这并不理想，它会限制Flexbox的行为方式，而不是它没有。

jsfiddle here：https://jsfiddle.net/jonfagence/2qtkandt/8/ - 显示内容非常明确。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

不要认为它与此问题相同（Flexbox正确显示，但有可能相关）：Absolutely positioned flexbox doesn't expand to fit contents

Answer 1

可能与此Chromium bug有关： https://code.google.com/p/chromium/issues/detail?id=247963

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

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

1 个答案: