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

[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

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