I am trying to create mega-menu for one of my e-commerce store.For that I am using flex-box layout.
Inside the mega-menu there are some subcategories that are needed to be shown by column.
So I can set flex-direction to column on parent category flex container but the problem is flex container doesn't grow in width when flex items wraps in second column as already mentioned many times in below question.
When flexbox items wrap in column mode, container does not grow its width
And for that purpose, as mentioned in flex-box bugs,
https://github.com/philipwalton/flexbugs#flexbug-14
If your container has a fixed height (usually the case when you enable wrapping), you avoid this bug by using flex-flow: row wrap (note row instead of column) and fake the column behavior by updating the container's writing mode (and reseting it on the items). Demo 14.1.b shows an example of this working in all modern browsers.
I have created the fiddle for illustration. What I want to do is to push the flex items to second column (make wrap them) only when there are more than fewer flex items or when container's height exceeds certain value (let's say 300px).
<div class="flexcontainer">
<div class="flexitem">This is flex item-1 with variable content.</div>
<div class="flexitem">This is flex item-2 with variable content.</div>
<div class="flexitem">This is flex item-3 with variable content.</div>
<div class="flexitem">This is flex item-4 with variable content.</div>
<div class="flexitem">This is flex item-5 with variable content.</div>
</div>
https://jsfiddle.net/wuyom9dn/1/
I want to make them wrap based on max-height of parent and otherwise flex-container should only consume height as per content height.
I don't want the flex-container to have fixed height but still want layout same as fiddle.
Is it possible?
