Can I force all elements to be wrapped using CSS flexbox?

Question

I have three block elements that I post using CSS Flexbox. (In my case, they seem to be two <select>s on either side of the <div>ider , I am <div>ider List Builder control.)

I want to:

• So that the middle element (separator) takes up the minimum amount of space.
• So that the element at both ends (that is: the selection controls) has a minimum width and grows to fill the possible space.
• To have all three elements on the same line when there is enough horizontal space in the container (for example: browser width)
• So that all elements are wrapped vertically when there is no horizontal space to place them horizontally.

Flexbox does a wonderful job on all these points, except for the last requirement. I can’t get all the elements to wrap if there is less space to have all of them on the same line.

I use a fairly simple flexbox setup to achieve the layout:

 .container { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; } select { flex-basis: 10em; flex-grow: 1; } .divider { flex-basis: 3em; flex-grow: 0; text-align: center; } 

The problem is that if the width of the container is set to any amount that is large enough for one choice plus a separator, it will complete the end selection, but not the divider. I will get a selection plus a separator on one line that looks ugly.

This script illustrates the problem:

http://jsfiddle.net/5s0yf74w/1/

Is it possible to achieve the desired result by customizing CSS while maintaining the overall flexbox layout?

Answer 1

I don’t think that exactly what you want is possible without JS-based placement logic logic (you know, let the browser display, calculate the width and conditionally add / remove classes). I think, however, that the solution given in this fiddle is a sensible CSS-only method. Basically there are two layouts, wide, where I made only one flex-wrap: nowrap; change flex-wrap: nowrap; to prevent the unpleasant event that you are describing where not all three elements are wrapped. And narrow, which redefines the direction of flexibility to flex-direction: column; . Both can easily switch using the proper media query with normal min-width .

Answer 2

Not quite what you ask for, but (maybe) even better. You can install it without any separator. If necessary, you get the illusion of a separator, but not a divider, if not

 #wide { width: 31em; } #narrow { width: 10em; top: 100px; } .container { position: absolute; border: solid red 1px; background-image: radial-gradient(circle at center, blue 5px, transparent 5px); } .fakecontainer { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; margin-right: -1em; } select { flex-basis: 11em; flex-grow: 1; margin-right: 1em; } select:nth-child (2) { flex-basis: 10em; } 

 <div class="container" id="wide"> <div class="fakecontainer"> <select multiple> <option>One of many</option> <option>Two of many</option> </select> <select multiple> <option>One of many</option> <option>Two of many</option> </select> </div> </div> <div class="container" id="narrow"> <div class="fakecontainer"> <select multiple> <option>One of many</option> <option>Two of many</option> </select> <select multiple> <option>One of many</option> <option>Two of many</option> </select> </div> </div> 

You just need an extra element, fakecontainer, to do the hack with fields

If you really need a divider in a narrow parameter, you just need to do a similar trick with the bottom margin (let me know if that is)