Re: [css-flexbox] feedback - issue with responsive columns and white-space: nowrap, using flex-shrink: 0 and flex-wrap: wrap

[please don't top-post: http://wiki.csswg.org/tools/www-style]

On Wed, Jul 23, 2014 at 11:14 AM, Richard Dodd <richard.o.dodd@gmail.com> wrote:
> Hi
>
> I've updated the example to make the paragraph smaller
> (http://jsfiddle.net/W7g3U/4/). The use case I'm looking at is using flexbox
> to automatically stack the columns when there isn't enough space for them
> both. This works fine, but then I want the text to wrap once all the space
> has been used up. Maybe this use case isn't possible with flexbox.
>
> Here is an example using javascript to achieve the result
> http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD (it's not very neat, but enough to
> get the idea. Try making the width of the preview smaller)

Okay, so you want the columns to get as small as possible to fit on a
line (flexing out to fill the line if there's leftover space), and
then their contents should wrap as well.

This is easy to achieve - you need to tell the flex items to start at
the *minimum* size (taking nowrap into account), and then grow as
necessary.  Do something like this:

.column {
    flex: auto;
    width: min-content;
}

(min-content needs prefixes right now in Firefox and Webkit/Blink, so
you'll need to write "width: -wekbit-min-content; width:
-moz-min-content;".)

You *should* be able to just move the min-content keyword up into
'flex', but that's not currently supported in Chrome, at least (which
is a bug).  The above code does the same thing, since "flex: auto"
defers to the width/height property.

If you also want to enforce some reasonable minimum size (for example,
preventing a column from being less than 10em wide, even if the nowrap
parts are narrower than that), throw in a min-width as well.

~TJ

Received on Wednesday, 23 July 2014 18:57:36 UTC