fix(grid): remove column flex styles

[richbachman]

@SiTaggart discovered we were using flex improperly in Column. Flex was interfering with children block elements an not allowing them to be full width. The flex styles are unnecessary because we're calculating a width for each Column.

This removes the Column flex styles, which allows children block elements to be 100% width.

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/twilio-dsys/paste/gctx3i8ya
✅ Preview: https://paste-git-fix-gridremove-column-flex.twilio-dsys.now.sh

[SiTaggart]

Do you mind removing all the width 100% on the box components in your stories to prove the theory?

[TheSisb]

Curious why this wasn't caught in any tests. Can we add a test for it or a storybook story of the behavior?

[richbachman]

@SiTaggart stories updated and theory proven. When I added the display flex rule, it set the default value of flex-wrap to nowrap, which overrides the width of block elements unless those elements have a width for flex-basis set.

[richbachman]

@TheSisb it was an error on my part. In the tests, we're not adding any child elements to each Column so the error wouldn't really have shown up. Stories are now updated so we can visually see the block child elements are now full width of each Column.

[SiTaggart]

Worth adding a couple of cards in grid stories? That would prove our compositions don’t affect our own components in adverse ways, rather than faking examples with box all the time?

Setting 100% width and not type checking mdx and storybook files is biting us a little

[richbachman]

@SiTaggart I've added a couple of stories showing actual components.