Absolutely positioned flexbox doesn't expand to fit contents

[Shaggy]

As you can see from this Fiddle, an absolutely positioned, columnar flexbox won’t expand to fit its children.

In Chrome, for example, it will only be as wide as the widest child element and as tall as the shortest column.

Can anyone suggest a solution without using any additional markup?

[Paulie_D]

I’m curious..why would you absolutely position a flexbox item?

[Shaggy]

It’s a dropdown menu.

[Paulie_D]

It’s not clear to me what you are trying to do.

How is this supposed to look?

[Shaggy]

As you can see in this Fiddle, the ul is nested in an li and positioned off-screen with a negative left value. The :hover state of the parent li sets the left value of the flexed ul to 0. Pretty standard stuff.

The submenus have the potential to contain many items so, to ensure they don’t drop off the end of the screen, I need to break to a new column after a set number of items.

[Paulie_D]

I’m pretty sure that display:flex and position:absolute are incompatible in this respect.

It works slightly better if you make the height a fixed value rather than max-height.

http://jsfiddle.net/cpg28ugf/3/

[Shaggy]

Thanks, Paulie. The problem with setting a specific height is that some menus will have less than 6 items in them so that solution would create too “white space” in those instances.

Currently, I’m using CSS columns until I can solve this flexbox issue but they’re creating a few problems of their own:

1. I have to specify the exact number of columns I want, rather than allowing the menus to break as necessary.

2. The menus will always spread across that number of columns, regardless of how many items there are in each.

3. All columns are as wide as the longest item in each menu.

Now, admittedly, I haven’t worked much with columns so I may well be overlooking something that would give me the same results I’m trying to achieve with the flexbox.

[Paulie_D]

As always, a Codepen Demo would be useful.

[Shaggy]

For the columns, you mean? Here’s a Fiddle: http://jsfiddle.net/fndroeee/

That one primarily illustrates the problem of both columns being the width of line 8 but you can see the other problems I’m having by adding or removing items, the list will no longer break to a new column after every 6th item.

[gena]

Have you considered using position-relative + top & display:none
Then change to display: block on hover?

I would think that would work with flexbox.

.parent ul {
display: none;
position: relative;
top: height of parent element;
}
.parent:hover ul {
display: none;
}

[Shaggy]

Unfortunately not, gena; setting the display property to “block” would overwrite the “flex” value.

[matfish2]

Had the same problem but with a one column dropdown. Solved by applying width:100% to the dropdown ul.

[madhurgarg]

If you want to give display:flex to absolutely positioned element, then you have to set left:0, right:0 like this:

.parent {
   position: absolute;
   left: 0;
   right: 0;
   display: flex;
}

This worked for me !

[Author]

Posts