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

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)

Thanks,
Rich

On Wed, Jul 23, 2014 at 7:01 PM, Tab Atkins Jr. <jackalmage@gmail.com>
wrote:

> [Sorry for the delay; our moderation queue was just emptied.]
>
> On Mon, Jun 2, 2014 at 1:58 PM, Richard Dodd <richard.o.dodd@gmail.com>
> wrote:
> > Hello
> >
> > It seems that white-space: nowrap is ignored when used in a div with
> > flex-shrink: 0 in a flex-wrap: wrap container (with display: flex).
> Example
> > here: http://jsfiddle.net/W7g3U/1/. Does the spec allow for precedence
> to be
> > given to wrapping (I want the whitespace to wrap before the flexbox, but
> > then the flexbox to wrap if the text with white-space: nowrap).
> >
> > Could someone point me to the relavent part of the specification? Can I
> > achieve what I am aiming to?
>
> I'm not sure I understand your example, or at least the connection
> between it and your description.  All of the "nowrap" things are, as
> desired, not wrapping.  It seems like the problem you're running into
> is with the *wrapping* element not wrapping, and instead just being
> really big, right?
>
> If so, this is because flexbox treats auto-size children as
> max-content (see substep E of
> <http://dev.w3.org/csswg/css-flexbox/#algo-main-item>) when initially
> figuring out their size.  Long paragraphs thus get *really wide*,
> because they contain a lot of text that all gets put on the same line.
> Normally the auto-shrinking behavior takes care of this and brings the
> flex item back down to a reasonable size, but in your case you've
> explicitly set the item to not shrink.
>
> You can get around this by either leaving the flex-shrink alone (so it
> sticks with its initial value of 1), or by setting an explicit width
> of some kind on the flex item (in your example, the .column element).
> The former should work fine - just swap your "flex: 0 0 auto;" with
> "flex: auto;".  This'll wrap your paragraph, but the nowrap things
> will still be nowrap, as you requested.
>
> Of course, for any decent-length paragraph, this'll still make the
> flex item as wide as the container, so that it always takes up a whole
> flex line by itself.  If this isn't what you want (maybe you want the
> paragraphs to wrap normally, but not get *too* wide either), just set
> a max-width on the paragraph or the flex item.
>
> ~TJ
>