Text in a grid item does not wrap, despite default or explicit attributes

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Wrapping text in a Grid item should not force it to not wrap

Current Behavior

Grid item makes it unwrappable, as far as I can tell.

Steps to Reproduce (for bugs)

I realize I might be doing something stupid, as I’m a material n00b and the samples don’t really cover my case. See the codebox or inline code below. The text inside the Grid item does not wrap, but the other block of text wraps as expected. Adding wrap=“wrap” had no effect, as did adding Typography with implicit or explicit wrapping.

import React from 'react'
import Grid from 'material-ui/Grid'

const Example = () => (
  <div>
    <Grid container>
      <Grid item>
        This is some text that should be wrapped. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Fugit magnam omnis eius ad quam ipsam
        dolorum iure itaque placeat fugiat animi iusto, asperiores nam
        architecto sit suscipit voluptates voluptate minima! Lorem ipsum dolor
        sit amet, consectetur adipisicing elit. Non, sunt fuga, doloremque,
        praesentium quod nulla tempore delectus deserunt veritatis quae ducimus
        temporibus. Recusandae alias, numquam eaque repudiandae aperiam rem quo?
      </Grid>
      <hr />
      This is some text that is wrapped. Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Fugit magnam omnis eius ad quam ipsam dolorum iure
      itaque placeat fugiat animi iusto, asperiores nam architecto sit suscipit
      voluptates voluptate minima! Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Non, sunt fuga, doloremque, praesentium quod nulla
      tempore delectus deserunt veritatis quae ducimus temporibus. Recusandae
      alias, numquam eaque repudiandae aperiam rem quo?
    </Grid>
  </div>
)

export default Example

Context

Would like to lay out some text in a grid item, but it loses the wrap property.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.47
React	16.3.2
browser	Chrome Version 66.0.3359.139 (Official Build) (64-bit)
etc

[ShaneMcX]

This isn’t the default for flexbox, which will wrap contained items. The reason this is happening is because Grid elements with the item attribute introduce a Grid-item-nn class that is setting “flex: 0 0 auto” (shorthand: “flex: none”). Flexbox default is “flex: 0 1 auto” (AKA “flex: initial”), which allows items to shrink. Likely either flex initial or flex auto (“flex: 1 1 auto”) would be preferable.

Is this an explicit design decision or a bug? Either way, documenting it would be useful.

[ShaneMcX]

Awesome. Thanks for merging!