3

I have a flexbox which wraps horizontally, inside an absolutely positioned div. The flexbox displays correctly, but its offsetWidth is based on the width of the widest column, rather than the entire contents.

This doesn't happen if the containing div has position: relative.

Is there a way to make this setup return the correct width, just with css? The group needs to be positioned on the right, and this issue means it's not getting placed correctly. I'm also using the width for some other operations.

Browsers: I'm seeing this on Chrome 46 and FF Dev Edition 43. IE11 displays correctly.

I'm currently working around this with javascript but that isn't ideal, it constrains the flexbox's behaviour in ways I'd rather it didn't.

jsfiddle here: https://jsfiddle.net/jonfagence/2qtkandt/8/ - showing the contents badly positioned.

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>

Don't think it's the same issue as this one (the flexbox displays correctly, for one thing), but possibly related: Absolutely positioned flexbox doesn't expand to fit contents

Community
  • 1
  • 1
Jon Fagence
  • 170
  • 2
  • 8

1 Answers1

1

Might be related to this Chromium bug: https://code.google.com/p/chromium/issues/detail?id=247963

It does seem to occur in Firefox Developer edition as well though.

Gerrit Bertier
  • 4,101
  • 2
  • 20
  • 36
  • Yes, looks like it's a browser bug rather than css-as-intended. IE11 displays correctly - I've added the browsers I've tested into the question. – Jon Fagence Nov 05 '15 at 11:40
  • I've been waiting quite a while for a solution that doesn't include javascript and allows the flexibility of flexbox layout. Unfortunately I think that we're stuck in the waiting game for browsers to address this. – Gerrit Bertier Nov 05 '15 at 15:35